Ajax Loader
×
HTML 
<div id="content">
1
<div id="content">
2
  <input type="checkbox" class="check" id="one" name="check_one" checked/>
3
  <label for="one"><div id="thumb"></div></label>
4
  <input type="checkbox" class="check" id="two" name="check_two" />
5
  <label for="two"><div id="thumb"></div></label>
6
</div>
 
CSS 
/**/
1
/**/
2
/**/
3
@off : #fc868a;
4
@on : #a6f779;
5
 
6
body {
7
  background: #fafafa;
8
}
9
 
10
* {
11
  box-sizing:border-box;
12
}
13
::selection{
14
  background:transparent;
15
}
16
P {
17
  text-align: center;
18
}
19
 
20
#content {
21
  width: 100px;
22
  margin: 180px auto;
23
}
24
 
25
label:before {
26
  content: '';
27
  display: block;
28
  width: 70px;
29
  height: 30px;
30
  display: block;
31
  border-radius: 5px;
32
 
33
  -webkit-box-shadow: inset 0 4px 0px rgba(0,0,0,.05), 0 0px 1px rgba(255,255,255,.8),0 1px 2px #fff;
34
  box-shadow: inset 0 4px 0px rgba(0,0,0,.05), 0 0px 1px rgba(255,255,255,.8),0 1px 2px #fff;
35
  position: relative;
36
  z-index: -1;
37
  padding: 1px;
38
}
39
 
40
label:before {
41
  background: @on;
42
}
43
 
44
#one:checked ~ label[for=one]:before {
45
  background: @off;
46
}
47
 
48
#two:checked ~ label[for=two]:before {
49
  background: @off;
50
}
51
 
52
/* 1 -Hide the inputs */
53
input[type=checkbox] {
54
  display: none;
55
}
56
 
57
/* 2 -Prepare labels */
58
#thumb {
59
  content: '';
60
  height: 24px;
61
  display: block;
62
  float: left;
63
  width: 30px;
64
  padding: 0px;
65
  margin: -30px 2px;
66
  border-radius: 4px;
67
  background: #fff;
68
 
69
  -webkit-box-shadow: 0 4px #eff1eb, 0 5px 15px rgba(0,0,0,.2);
70
  box-shadow: 0 4px #eff1eb, 0 5px 15px rgba(0,0,0,.2);
71
  position: absolute;
72
  z-index: 1;
73
}
74
 
75
/* 3 -Prepare the fonts ? */
76
label {
77
  display: block;
78
  margin: 8px 0;
79
}
80
 
81
/* Now, make it move */
82
#one:checked ~ label[for=one] #thumb {
83
  margin: -30px 40px;
84
}
85
 
86
#two:checked ~ label[for=two] #thumb {
87
  margin: -30px 40px;
88
}
89
 
90
 
91
label:before,
92
#thumb,
93
#one:checked ~ label[for=one]:before,
94
#two:checked ~ label[for=two]:before {
95
  -webkit-transition: all .2s;
96
-moz-transition: all .2s;
97
transition: all .2s;
98
}
99
 
100
 
 

Lovely switchers

CSSDeck G+