Ajax Loader
HTML
 
1
 
2
  <input type="checkbox" id="switch" name="switch">
3
  <label for="switch" class="switch"></label>
4
 
 
CSS
*, *:after, *:before { 
1
*, *:after, *:before { 
2
  box-sizing: border-box;
3
}
4
 
5
#switch {
6
   visibility:hidden;
7
  clip:rect(0 0 0 0);
8
  position: absolute;
9
  left: 9999px;
10
}
11
 
12
.switch {
13
  display: block;
14
  width: 130px;
15
  height: 60px;
16
  margin: 70px auto; 
17
  position: relative;
18
  background: #ced8da; /* Old browsers */
19
  background: -moz-linear-gradient(left,  #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%); /* FF3.6+ */
20
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ced8da), color-stop(29%,#d8e0e3), color-stop(34%,#ccd4d7), color-stop(62%,#d4dcdf), color-stop(68%,#fff9f4), color-stop(74%,#e1e9ec), color-stop(100%,#b7bfc2)); /* Chrome,Safari4+ */
21
  background: -webkit-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* Chrome10+,Safari5.1+ */
22
  background: -o-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* Opera 11.10+ */
23
  background: -ms-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* IE10+ */
24
  background: linear-gradient(to right,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* W3C */
25
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 ); /* IE6-9 */
26
  transition: all 0.2s ease-out;
27
  cursor: pointer;
28
  border-radius: 0.35em;
29
  box-shadow: 
30
    0 0 1px 2px rgba(0,0,0,0.7),
31
    inset 0 2px 0 rgba(255,255,255,0.6),
32
    inset 0 -1px 0 1px rgba(0,0,0,0.3),
33
    0 8px 10px rgba(0,0,0,0.15);
34
}  
35
 
36
.switch:before {
37
  display:block;
38
  position: absolute;
39
  left: -35px; right: -35px;
40
  top: -25px; bottom: -25px;
41
  z-index: -2;
42
  content: "";
43
  border-radius: 0.4em;
44
  background: #d5dde0;
45
  background: linear-gradient(#d7dfe2, #bcc7cd);
46
  box-shadow:
47
    inset 0 2px 0 rgba(255,255,255,0.6),
48
    inset 0 -1px 1px 1px rgba(0,0,0,0.3),
49
    0 0 8px 2px rgba(0,0,0,0.2),
50
    0 2px 4px 2px rgba(0,0,0,0.1);
51
  pointer-events: none;
52
  transition: all 0.2s ease-out;
53
}
54
 
55
.switch:after {
56
  content: "";
57
  position: absolute;
58
  right: -25px;
59
  top: 50%;
60
  width: 16px;
61
  height: 16px;
62
  border-radius: 50%;
63
  background: #788b91;
64
  margin-top: -8px;
65
  z-index: -1;
66
  box-shadow: 
67
    inset 0 -1px 8px rgba(0,0,0,0.7),
68
    inset 0 -2px 2px rgba(0,0,0,0.2),
69
    0 1px 0 white,
70
    0 -1px 0 rgba(0,0,0,0.5),
71
    -47px 32px 15px 13px rgba(0,0,0,0.25);
72
}
73
 
74
#switch:checked ~ .switch {
75
  background: #b7bfc2; /* Old browsers */
76
  background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%); /* FF3.6+ */
77
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7bfc2), color-stop(26%,#e1e9ec), color-stop(32%,#fff9f4), color-stop(38%,#d4dcdf), color-stop(66%,#ccd4d7), color-stop(71%,#d8e0e3), color-stop(100%,#ced8da)); /* Chrome,Safari4+ */
78
  background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* Chrome10+,Safari5.1+ */
79
  background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* Opera 11.10+ */
80
  background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* IE10+ */
81
  background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* W3C */
82
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 ); /* IE6-9 */
83
}
84
 
85
#switch:checked ~ .switch:after {
86
  background: #b1ffff;
87
  box-shadow: 
88
    inset 0 -1px 8px rgba(0,0,0,0.7),
89
    inset 0 -2px 2px rgba(0,0,0,0.2),
90
    0 1px 0 white,
91
    0 -1px 0 rgba(0,0,0,0.5),
92
    -110px 32px 15px 13px rgba(0,0,0,0.25); 
93
}
 

Pure CSS button switch

CSSDeck G+