Ajax Loader
HTML 
<form>
1
<form>
2
  <h1>Employer Log in</h1>
3
  <div class="inset">
4
  <p>
5
    <label for="email">EMAIL ADDRESS</label>
6
    <input type="text" name="email" id="email">
7
  </p>
8
  <p>
9
    <label for="password">PASSWORD</label>
10
    <input type="password" name="password" id="password">
11
  </p>
12
  <p>
13
    <input type="checkbox" name="remember" id="remember">
14
    <label for="remember">Remember me for 14 days</label>
15
  </p>
16
  </div>
17
  <p class="p-container">
18
    <span>Forgot password ?</span>
19
    <input type="submit" name="go" id="go" value="Log in">
20
  </p>
21
</form>
 
CSS 
* { box-sizing: border-box; padding:0; margin: 0; }
1
* { box-sizing: border-box; padding:0; margin: 0; }
2
 
3
body {
4
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
5
  color:white;
6
  font-size:12px;
7
  background:#333 url(/images/classy_fabric.png);
8
}
9
 
10
form {
11
  background:#111;
12
  width:300px;
13
  margin:30px auto;
14
  border-radius:0.4em;
15
  border:1px solid #191919;
16
  overflow:hidden;
17
  position:relative;
18
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
19
}
20
 
21
form:after {
22
  content:"";
23
  display:block;
24
  position:absolute;
25
  height:1px;
26
  width:100px;
27
  left:20%;
28
  background:linear-gradient(left, #111, #444, #b6b6b8, #444, #111);
29
  top:0;
30
}
31
 
32
form:before {
33
  content:"";
34
  display:block;
35
  position:absolute;
36
  width:8px;
37
  height:5px;
38
  border-radius:50%;
39
  left:34%;
40
  top:-7px;
41
  box-shadow: 0 0 6px 4px #fff;
42
}
43
 
44
.inset {
45
  padding:20px;
46
  border-top:1px solid #19191a;
47
}
48
 
49
form h1 {
50
  font-size:18px;
51
  text-shadow:0 1px 0 black;
52
  text-align:center;
53
  padding:15px 0;
54
  border-bottom:1px solid rgba(0,0,0,1);
55
  position:relative;
56
}
57
 
58
form h1:after {
59
  content:"";
60
  display:block;
61
  width:250px;
62
  height:100px;
63
  position:absolute;
64
  top:0;
65
  left:50px;
66
  pointer-events:none;
67
  transform:rotate(70deg);
68
  background:linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
69
70
}
71
 
72
label {
73
  color:#666;
74
  display:block;
75
  padding-bottom:9px;
76
}
77
 
78
input[type=text],
79
input[type=password] {
80
  width:100%;
81
  padding:8px 5px;
82
  background:linear-gradient(#1f2124, #27292c);
83
  border:1px solid #222;
84
  box-shadow:
85
    0 1px 0 rgba(255,255,255,0.1);
86
  border-radius:0.3em;
87
  margin-bottom:20px;
88
}
89
 
90
label[for=remember]{
91
  color:white;
92
  display:inline-block;
93
  padding-bottom:0;
94
  padding-top:5px;
95
}
96
 
97
input[type=checkbox] {
98
  display:inline-block;
99
  vertical-align:top;
100
}
101
 
102
.p-container {
103
  padding:0 20px 20px 20px;
104
}
105
 
106
.p-container:after {
107
  clear:both;
108
  display:table;
109
  content:"";
110
}
111
 
112
.p-container span {
113
  display:block;
114
  float:left;
115
  color:#0d93ff;
116
  padding-top:8px;
117
}
118
 
119
input[type=submit] {
120
  padding:5px 20px;
121
  border:1px solid rgba(0,0,0,0.4);
122
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
123
  box-shadow:
124
    inset 0 1px 0 rgba(255,255,255,0.3),
125
    inset 0 10px 10px rgba(255,255,255,0.1);
126
  border-radius:0.3em;
127
  background:#0184ff;
128
  color:white;
129
  float:right;
130
  font-weight:bold;
131
  cursor:pointer;
132
  font-size:13px;
133
}
134
 
135
input[type=submit]:hover {
136
  box-shadow:
137
    inset 0 1px 0 rgba(255,255,255,0.3),
138
    inset 0 -10px 10px rgba(255,255,255,0.1);
139
}
140
 
141
input[type=text]:hover,
142
input[type=password]:hover,
143
label:hover ~ input[type=text],
144
label:hover ~ input[type=password] {
145
  background:#27292c;
146
}
 

Batman login form

CSSDeck G+