Ajax Loader
HTML 
<html>
1
<html>
2
<body>
3
<link href='http://fonts.googleapis.com/css?family=Anonymous+Pro:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
4
<div>
5
  <form>
6
    <input class="topInput" type="" placeholder="Username" value=""><br/>
7
    <input type="password" placeholder="Password" value=""><br/>
8
    <button type="submit" >Sign In</button>
9
  </form>
10
</div>
11
</body>
12
</html>
 
CSS 
body {
1
body {
2
  background: #4d4d4d;
3
  }
4
 
5
div {
6
  margin: 5em auto 0;
7
  padding: 0em;
8
  background: #f8f8f8;
9
  border: 0;
10
  border-radius: 10px;
11
  height: auto;
12
  width: 280px;
13
  box-shadow: 0px 2px 4px rgba(0,0,0,0.125);
14
  text-align:center;
15
  font-family: 'Anonymous Pro';
16
  }
17
 
18
form {
19
  margin-top:10px;
20
  }
21
 
22
label {
23
24
  font-size: 1.5em;
25
  line-height: 1.5em;
26
  color: #aaaaaa;
27
  }
28
 
29
input {
30
  margin: 0px 0px 0px;
31
  border: 0;
32
  height: 2em;
33
  width: 100%;
34
  text-align: center;
35
  color: #666666;
36
  font-size: 1.5em;
37
  }
38
  input:focus {
39
    background-color: #f3f3f3;
40
    outline: 0;
41
  }
42
  input.topInput {
43
    border-top-right-radius: 5px;
44
    border-top-left-radius: 5px;
45
  }
46
button {
47
  height: 2em;
48
  width: 100%;
49
  border: 0px;
50
  border-bottom-right-radius: 5px;
51
  border-bottom-left-radius: 5px;
52
  box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
53
  background: #66CC66;
54
  color:#f8f8f8;
55
  font-size: 1.5em;
56
  }
57
  button:focus {
58
    background: #5CB75C;
59
    outline: 0;
60
  }
61
  button:hover {
62
  height: 2em;
63
  width: 100%;
64
  border: 0px;
65
  box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
66
  background: #5CB75C;
67
  color:#f8f8f8;
68
  font-size: 1.5em;
69
  }
70
  button:active {
71
  padding: 1px 0 0 0;
72
  height: 2em;
73
  width: 100%;
74
  border: 0px;
75
  box-shadow: 0px 1px 1px rgba(0,0,0,0.125);
76
  background: #27B427;
77
  color:#f8f8f8;
78
  font-size: 1.5em;
79
  }
80
 

Minimal Form

CSSDeck G+