1#switch {
2  visibility: hidden;
3  clip: rect(0 0 0 0);
4  position: absolute;
5  left: 9999px;
6}
7
8.switch {
9  display: block;
10  width: 130px;
11  height: 60px;
12  margin: 70px auto;
13  position: relative;
14  background: #ced8da;
15  background: linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
16  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );
17  transition: all 0.2s ease-out;
18  cursor: pointer;
19  border-radius: 0.35em;
20  box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),
21    inset 0 2px 0 rgba(255,255,255,0.6),
22    inset 0 -1px 0 1px rgba(0,0,0,0.3),
23    0 8px 10px rgba(0,0,0,0.15);
24}
25
26.switch:before {
27  display: block;
28  position: absolute;
29  left: -35px;
30  right: -35px;
31  top: -25px;
32  bottom: -25px;
33  z-index: -2;
34  content: "";
35  border-radius: 0.4em;
36  background: #d5dde0;
37  background: linear-gradient(#d7dfe2, #bcc7cd);
38  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),
39    inset 0 -1px 1px 1px rgba(0,0,0,0.3),
40    0 0 8px 2px rgba(0,0,0,0.2),
41    0 2px 4px 2px rgba(0,0,0,0.1);
42  pointer-events: none;
43  transition: all 0.2s ease-out;
44}
45
46.switch:after {
47  content: "";
48  position: absolute;
49  right: -25px;
50  top: 50%;
51  width: 16px;
52  height: 16px;
53  border-radius: 50%;
54  background: #788b91;
55  margin-top: -8px;
56  z-index: -1;
57  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
58    inset 0 -2px 2px rgba(0,0,0,0.2),
59    0 1px 0 white,
60    0 -1px 0 rgba(0,0,0,0.5),
61    -47px 32px 15px 13px rgba(0,0,0,0.25);
62}
63
64#switch:checked ~ .switch {
65  background: #b7bfc2;
66  background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
67  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );
68}
69
70#switch:checked ~ .switch:after {
71  background: #b1ffff;
72  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
73    inset 0 -2px 2px rgba(0,0,0,0.2),
74    0 1px 0 white,
75    0 -1px 0 rgba(0,0,0,0.5),
76    -110px 32px 15px 13px rgba(0,0,0,0.25);
77}