Ajax Loader
×
HTML 
<ul id="sliders">
1
<ul id="sliders">
2
<li>
3
  <input type="checkbox" id="slider1" checked="checked" /><label for="slider1"></label>
4
  </li>
5
  <li>
6
  <input type="checkbox" id="slider2" /><label for="slider2"></label>
7
  </li>
8
</ul>
 
CSS 
@on: 120;
1
@on: 120;
2
@off: 0;
3
 
4
body {
5
  background-image: linear-gradient(#eee, #aaa);
6
}
7
 
8
#sliders {
9
  margin: 40% 40%;
10
  list-style: none;
11
}
12
 
13
li { margin-bottom: .5em; }
14
 
15
input[type=checkbox] {
16
  visibility: hidden;
17
}
18
 
19
label {
20
  border: 1px solid #666;
21
  display: inline-block;
22
  width: 4em;
23
  height: 1.5em;
24
  border-radius: .5em;
25
  background: #ccd;
26
  box-shadow: .2em .2em .3em #aab inset, -.2em -.2em .3em #eef inset;
27
}
28
label:hover {
29
  border-color: #66d;
30
}
31
label:after{
32
  content: '';
33
  display: block;
34
  background: #333;
35
  border-radius: .3em;
36
  height: .3em;
37
  width: 2.5em;
38
  margin-left: .75em;
39
  margin-top: -.95em;
40
}
41
label:before {
42
  content: '';
43
  display: inline-block;
44
  border-radius: 50%;
45
  width: 1.25em;
46
  height: 1.25em;
47
  margin-top: .15em;
48
  margin-left: .15em;
49
  background: hsl(@off, 100%, 40%);
50
  box-shadow: .1em .1em .1em hsl(@off, 100%, 90%) inset, -.1em -.1em .1em hsl(@off, 100%, 10%) inset;
51
  transition: all .5s ease;
52
}
53
input:checked + label:before {
54
  background: hsl(@on, 100%, 40%);
55
  box-shadow: .1em .1em .1em hsl(@on, 100%, 90%) inset, -.1em -.1em .1em hsl(@on, 100%, 10%) inset;
56
  margin-left: 2.6em;
57
}
 

Pure CSS3 On-Off Switch

CSSDeck G+