Ajax Loader
×
HTML
<div>
1
<div>
2
<input class="lockCheckbox" type="checkbox" id="lockCheckbox" />
3
<label for="lockCheckbox"></label>
4
</div>
 
CSS
 
1
 
2
/* ---------- FONTAWESOME ---------- */
3
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
4
/* ---------- http://weloveiconfonts.com/ ---------- */
5
 
6
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
7
 
8
body {
9
  background: rgb(225, 230, 225);
10
}
11
 
12
div {
13
  position: absolute;
14
  left: 48%;
15
  top: 48%;
16
}
17
 
18
input.lockCheckbox { visibility: hidden; }
19
input.lockCheckbox ~ label {
20
  font-family: FontAwesome;
21
  font-size: 2em;
22
  border: 1px solid rgb(100, 100, 200);
23
  width: 1.1em;
24
  height: 1.1em;
25
  display: inline-block;
26
  text-align: center;
27
  border-radius: 10px;
28
  padding-top: 2px;
29
  background-image: linear-gradient(rgb(225, 225, 225), rgb(250, 250, 250) 40%, rgb(150, 150, 150) 70%, rgb(100, 100, 100) 100%);
30
  box-shadow: 0 0 .1em rgb(100, 100, 200);
31
}
32
input.lockCheckbox ~ label:hover {
33
  box-shadow: 0 0 .3em rgb(100, 100, 200);
34
}
35
input.lockCheckbox ~ label:active { 
36
  background-image: linear-gradient(rgb(100, 100, 100), rgb(150, 150, 150) 40%, rgb(225, 225, 225) 70%, rgb(250, 250, 250) 100%);
37
  box-shadow: 0 0 .5em rgb(100, 100, 200);
38
}
39
 
40
input.lockCheckbox ~ label:before {
41
  color: rgb(100, 50, 50);
42
  content: "\f09c";
43
}
44
input.lockCheckbox:checked ~label:before {
45
  color: rgb(50, 100, 50);
46
  content: "\f023";
47
}
 

CSS3 Padlock

CSSDeck G+