Switch by csemszepp

#212121

1.switch {
2  display: inline-block;
3  margin: 10em 2em;
4  position: relative;
5  border-radius: 3.5em;
6  -webkit-box-shadow: 0 0 0.5em rgba(2,255,255,0.2);
7  -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
8  box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
9}
10
11.switch label {
12  width: 100%;
13  height: 100%;
14  margin: 0;
15  padding: 0;
16  display: block;
17  position: absolute;
18  top: 0;
19  left: 0;
20  z-index: 10;
21}
22
23.switch input {
24  display: none;
25}
26
27.switch span {
28  display: block;
29  -webkit-transition: top 0.2s;
30  -moz-transition: top 0.2s;
31  -ms-transition: top 0.2s;
32  -o-transition: top 0.2s;
33  transition: top 0.2s;
34}
35
36.switch-border1 {
37  border: 0.1em solid #000;
38  border-radius: 3.5em;
39  -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
40  -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
41  box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
42}
43
44.switch-border2 {
45  width: 6.6em;
46  height: 12.6em;
47  position: relative;
48  border: 0.1em solid #323232;
49  background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
50  background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
51  background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
52  background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
53  background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
54  background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
55  border-radius: 3.4em;
56}
57
58.switch-border2:before,
59.switch-border2:after {
60  content: '';
61  display: block;
62  width: 100%;
63  height: 100%;
64  position: absolute;
65  top: 0;
66  left: 0;
67  z-index: 0;
68  opacity: .3;
69  border-radius: 3.4em;
70}
71
72.switch-border2:before {
73  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
74  background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
75  background: -moz-linear-gradient(#000, rgba(0,0,0,0));
76  background: -ms-linear-gradient(#000, rgba(0,0,0,0));
77  background: -o-linear-gradient(#000, rgba(0,0,0,0));
78  background: linear-gradient(#000, rgba(0,0,0,0));
79}
80
81.switch-border2:after {
82  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
83  background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
84  background: -moz-linear-gradient(rgba(0,0,0,0), #000);
85  background: -ms-linear-gradient(rgba(0,0,0,0), #000);
86  background: -o-linear-gradient(rgba(0,0,0,0), #000);
87  background: linear-gradient(rgba(0,0,0,0), #000);
88}
89
90.switch-top {
91  width: 100%;
92  height: 84%;
93  position: absolute;
94  top: 8%;
95  left: 0;
96  z-index: 1;
97  background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
98  background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
99  background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
100  background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
101  background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
102  background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
103  border-radius: 3.4em;
104}
105
106.switch-shadow {
107  width: 100%;
108  height: 100%;
109  position: absolute;
110  top: 0;
111  left: 0;
112  z-index: 2;
113  border-radius: 3.4em;
114  -webkit-box-shadow: 0 0 2em black inset;
115  -moz-box-shadow: 0 0 2em black inset;
116  box-shadow: 0 0 2em black inset;
117}
118
119.switch-handle-left,
120.switch-handle-right {
121  content: '';
122  display: block;
123  width: 3.6em;
124  height: 0;
125  position: absolute;
126  top: 6.6em;
127  z-index: 2;
128  border-bottom: 4.5em solid #111;
129  border-left: 0.7em solid transparent;
130  border-right: 0.7em solid transparent;
131  border-radius: 0;
132}
133
134.switch-handle-left {
135  left: 0.8em;
136}
137
138.switch-handle-right {
139  right: 0.8em;
140}
141
142.switch-handle {
143  width: 3.6em;
144  height: 4.5em;
145  position: absolute;
146  top: 6.6em;
147  left: 1.5em;
148  z-index: 3;
149  background: #333;
150  background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
151  background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
152  background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
153  background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
154  background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
155  background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
156  border-radius: 0;
157}
158
159.switch-handle-top {
160  width: 5em;
161  height: 5em;
162  position: absolute;
163  top: 8.5em;
164  left: 0.8em;
165  z-index: 4;
166  background-color: #555;
167  background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));
168  background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);
169  background-image: -moz-linear-gradient(left, #5F5F5F, #878787);
170  background-image: -ms-linear-gradient(left, #5F5F5F, #878787);
171  background-image: -o-linear-gradient(left, #5F5F5F, #878787);
172  background-image: linear-gradient(to right, #5F5F5F, #878787);
173  border-top: 0.2em solid #AEB2B3;
174  border-radius: 2.5em;
175}
176
177.switch-handle-bottom {
178  width: 3.6em;
179  height: 3.6em;
180  position: absolute;
181  top: 4.7em;
182  left: 1.5em;
183  z-index: 3;
184  background: #333;
185  background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
186  background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
187  background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
188  background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
189  background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
190  background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
191  border-top: 0.2em solid #141414;
192  border-radius: 1.8em;
193}
194
195.switch-handle-base {
196  width: 4.2em;
197  height: 4.2em;
198  position: absolute;
199  top: 3.8em;
200  left: 1.2em;
201  z-index: 2;
202  border-top: 0.2em solid rgba(255,255,255,0.35);
203  border-radius: 2.1em;
204  -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
205  -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
206  box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
207}
208
209.switch-led {
210  position: absolute;
211  left: 2em;
212  border-radius: 1.4em;
213}
214
215.switch-led-border {
216  border: 0.2em solid black;
217  border-radius: 1.3em;
218}
219
220.switch-led-light {
221  border-radius: 1.1em;
222  -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
223  -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
224  box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
225}
226
227.switch-led-glow {
228  width: 2em;
229  height: 2em;
230  position: relative;
231  border-radius: 1em;
232}
233
234.switch-led-glow:before {
235  content: '';
236  display: block;
237  width: 0.6em;
238  height: 0.6em;
239  position: absolute;
240  top: 0.3em;
241  left: 0.7em;
242  background: rgba(255,255,255,0.2);
243  border-radius: 0.3em;
244  -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
245  -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
246  box-shadow: 0 0 1em rgba(255,255,255,0.75);
247}
248
249.switch-led-glow:after {
250  content: '';
251  display: block;
252  width: 0;
253  height: 0;
254  position: absolute;
255  top: 0;
256  left: 0;
257  opacity: 0.2;
258  filter: alpha(opacity=20);
259  border: 1em solid #fff;
260  border-color: transparent #fff transparent #fff;
261  border-radius: 1em;
262  -webkit-transform: rotate(45deg);
263  -moz-transform: rotate(45deg);
264  -ms-transform: rotate(45deg);
265  -o-transform: rotate(45deg);
266  transform: rotate(45deg);
267}
268
269.switch-led:after {
270  display: block;
271  width: 100%;
272  position: absolute;
273  left: 0;
274  color: #666;
275  font-family: arial, verdana, sans-serif;
276  font-weight: bold;
277  text-align: center;
278  text-shadow: 0 0.1em rgba(0,0,0,0.7);
279}
280
281.switch-led-green:after {
282  content: 'ON';
283  top: -1.8em;
284}
285
286.switch-led-red:after {
287  content: 'OFF';
288  bottom: -1.8em;
289}
290
291.switch-led-green {
292  top: -5em;
293  border-top: 0.1em solid rgba(0,161,75,0.5);
294  border-bottom: 0.1em solid rgba(255,255,255,0.25);
295}
296
297.switch-led-green .switch-led-light {
298  background: rgb(0,161,75);
299  border: 0.1em solid rgb(0,104,56);
300}
301
302.switch-led-red {
303  bottom: -5em;
304  border-top: 0.1em solid rgba(237,28,36,0.2);
305  border-bottom: 0.1em solid rgba(255,255,255,0.25);
306  -webkit-box-shadow: 0 0 3em rgb(237,28,36);
307  -moz-box-shadow: 0 0 3em rgb(237,28,36);
308  box-shadow: 0 0 3em rgb(237,28,36);
309}
310
311.switch-led-red .switch-led-light {
312  background: rgb(237,28,36);
313  border: 0.1em solid rgb(161,30,45);
314}
315
316.switch-led-red .switch-led-glow {
317  background: #fff;
318  background: rgba(255, 255, 255, 0.3);
319  filter: alpha(opacity=30);
320}
321
322/* Switch on */
323
324.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {
325  top: 1.5em;
326  border-bottom: 0;
327  border-top: 4.5em solid #111;
328}
329
330.switch input:checked~.switch-handle {
331  top: 1.5em;
332}
333
334.switch input:checked~.switch-handle-top {
335  top: -1em;
336  border-top: 0;
337  border-bottom: 0.2em solid #AEB2B3;
338}
339
340.switch input:checked~.switch-handle-bottom {
341  top: 4.2em;
342  border-top: 0;
343  border-bottom: 0.2em solid #141414;
344}
345
346.switch input:checked~.switch-handle-base {
347  top: 4.5em;
348  border-top: 0;
349  border-bottom: 0.2em solid rgba(255,255,255,0.35);
350}
351
352.switch input:checked~.switch-led-green {
353  -webkit-box-shadow: 0 0 3em rgb(0,161,75);
354  -moz-box-shadow: 0 0 3em rgb(0,161,75);
355  box-shadow: 0 0 3em rgb(0,161,75);
356}
357
358.switch input:checked~.switch-led-green .switch-led-glow {
359  background: #fff;
360  background: rgba(255, 255, 255, 0.4);
361  filter: alpha(opacity=40);
362}
363
364.switch input:checked~.switch-led-red {
365  -webkit-box-shadow: none;
366  -moz-box-shadow: none;
367  box-shadow: none;
368}
369
370.switch input:checked~.switch-led-red .switch-led-glow {
371  background: rgba(255, 255, 255, 0);
372  filter: alpha(opacity=0);
373}
374
375#switchwhite {
376  visibility: hidden;
377  clip: rect(0 0 0 0);
378  position: absolute;
379  left: 9999px;
380}
381
382.switchwhite {
383  display: block;
384  width: 130px;
385  height: 60px;
386  margin: 70px auto;
387  position: relative;
388  background: #ced8da;
389 /* Old browsers */
390  background: -moz-linear-gradient(left,  #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%);
391 /* FF3.6+ */
392  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));
393 /* Chrome,Safari4+ */
394  background: -webkit-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
395 /* Chrome10+,Safari5.1+ */
396  background: -o-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
397 /* Opera 11.10+ */
398  background: -ms-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
399 /* IE10+ */
400  background: linear-gradient(to right,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
401 /* W3C */
402  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );
403 /* IE6-9 */
404  transition: all 0.2s ease-out;
405  cursor: pointer;
406  border-radius: 0.35em;
407  box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),
408    inset 0 2px 0 rgba(255,255,255,0.6),
409    inset 0 -1px 0 1px rgba(0,0,0,0.3),
410    0 8px 10px rgba(0,0,0,0.15);
411}
412
413.switchwhite:before {
414  display: block;
415  position: absolute;
416  left: -35px;
417  right: -35px;
418  top: -25px;
419  bottom: -25px;
420  z-index: -2;
421  content: "";
422  border-radius: 0.4em;
423  background: #d5dde0;
424  background: linear-gradient(#d7dfe2, #bcc7cd);
425  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),
426    inset 0 -1px 1px 1px rgba(0,0,0,0.3),
427    0 0 8px 2px rgba(0,0,0,0.2),
428    0 2px 4px 2px rgba(0,0,0,0.1);
429  pointer-events: none;
430  transition: all 0.2s ease-out;
431}
432
433.switchwhite:after {
434  content: "";
435  position: absolute;
436  right: -25px;
437  top: 50%;
438  width: 16px;
439  height: 16px;
440  border-radius: 50%;
441  background: #788b91;
442  margin-top: -8px;
443  z-index: -1;
444  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
445    inset 0 -2px 2px rgba(0,0,0,0.2),
446    0 1px 0 white,
447    0 -1px 0 rgba(0,0,0,0.5),
448    -47px 32px 15px 13px rgba(0,0,0,0.25);
449}
450
451#switchwhite:checked ~ .switchwhite {
452  background: #b7bfc2;
453 /* Old browsers */
454  background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%);
455 /* FF3.6+ */
456  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));
457 /* Chrome,Safari4+ */
458  background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
459 /* Chrome10+,Safari5.1+ */
460  background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
461 /* Opera 11.10+ */
462  background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
463 /* IE10+ */
464  background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
465 /* W3C */
466  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );
467 /* IE6-9 */
468}
469
470#switchwhite:checked ~ .switchwhite:after {
471  background: #b1ffff;
472  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
473    inset 0 -2px 2px rgba(0,0,0,0.2),
474    0 1px 0 white,
475    0 -1px 0 rgba(0,0,0,0.5),
476    -110px 32px 15px 13px rgba(0,0,0,0.25);
477}

.switch {
  display: inline-block;
  margin: 10em 2em;
  position: relative;
  border-radius: 3.5em;
  -webkit-box-shadow: 0 0 0.5em rgba(2,255,255,0.2);
  -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
  box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
}

.switch label {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.switch input {
  display: none;
}

.switch span {
  display: block;
  -webkit-transition: top 0.2s;
  -moz-transition: top 0.2s;
  -ms-transition: top 0.2s;
  -o-transition: top 0.2s;
  transition: top 0.2s;
}

.switch-border1 {
  border: 0.1em solid #000;
  border-radius: 3.5em;
  -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
  box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
}

.switch-border2 {
  width: 6.6em;
  height: 12.6em;
  position: relative;
  border: 0.1em solid #323232;
  background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
  background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
  border-radius: 3.4em;
}

.switch-border2:before,
.switch-border2:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: .3;
  border-radius: 3.4em;
}

.switch-border2:before {
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
  background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
  background: -moz-linear-gradient(#000, rgba(0,0,0,0));
  background: -ms-linear-gradient(#000, rgba(0,0,0,0));
  background: -o-linear-gradient(#000, rgba(0,0,0,0));
  background: linear-gradient(#000, rgba(0,0,0,0));
}

.switch-border2:after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
  background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
  background: -moz-linear-gradient(rgba(0,0,0,0), #000);
  background: -ms-linear-gradient(rgba(0,0,0,0), #000);
  background: -o-linear-gradient(rgba(0,0,0,0), #000);
  background: linear-gradient(rgba(0,0,0,0), #000);
}

.switch-top {
  width: 100%;
  height: 84%;
  position: absolute;
  top: 8%;
  left: 0;
  z-index: 1;
  background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
  background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
  background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
  border-radius: 3.4em;
}

.switch-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 3.4em;
  -webkit-box-shadow: 0 0 2em black inset;
  -moz-box-shadow: 0 0 2em black inset;
  box-shadow: 0 0 2em black inset;
}

.switch-handle-left,
.switch-handle-right {
  content: '';
  display: block;
  width: 3.6em;
  height: 0;
  position: absolute;
  top: 6.6em;
  z-index: 2;
  border-bottom: 4.5em solid #111;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  border-radius: 0;
}

.switch-handle-left {
  left: 0.8em;
}

.switch-handle-right {
  right: 0.8em;
}

.switch-handle {
  width: 3.6em;
  height: 4.5em;
  position: absolute;
  top: 6.6em;
  left: 1.5em;
  z-index: 3;
  background: #333;
  background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
  background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
  border-radius: 0;
}

.switch-handle-top {
  width: 5em;
  height: 5em;
  position: absolute;
  top: 8.5em;
  left: 0.8em;
  z-index: 4;
  background-color: #555;
  background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));
  background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);
  background-image: -moz-linear-gradient(left, #5F5F5F, #878787);
  background-image: -ms-linear-gradient(left, #5F5F5F, #878787);
  background-image: -o-linear-gradient(left, #5F5F5F, #878787);
  background-image: linear-gradient(to right, #5F5F5F, #878787);
  border-top: 0.2em solid #AEB2B3;
  border-radius: 2.5em;
}

.switch-handle-bottom {
  width: 3.6em;
  height: 3.6em;
  position: absolute;
  top: 4.7em;
  left: 1.5em;
  z-index: 3;
  background: #333;
  background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
  background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
  background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
  border-top: 0.2em solid #141414;
  border-radius: 1.8em;
}

.switch-handle-base {
  width: 4.2em;
  height: 4.2em;
  position: absolute;
  top: 3.8em;
  left: 1.2em;
  z-index: 2;
  border-top: 0.2em solid rgba(255,255,255,0.35);
  border-radius: 2.1em;
  -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
  -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
  box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
}

.switch-led {
  position: absolute;
  left: 2em;
  border-radius: 1.4em;
}

.switch-led-border {
  border: 0.2em solid black;
  border-radius: 1.3em;
}

.switch-led-light {
  border-radius: 1.1em;
  -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
  -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
  box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
}

.switch-led-glow {
  width: 2em;
  height: 2em;
  position: relative;
  border-radius: 1em;
}

.switch-led-glow:before {
  content: '';
  display: block;
  width: 0.6em;
  height: 0.6em;
  position: absolute;
  top: 0.3em;
  left: 0.7em;
  background: rgba(255,255,255,0.2);
  border-radius: 0.3em;
  -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
  -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
  box-shadow: 0 0 1em rgba(255,255,255,0.75);
}

.switch-led-glow:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
  filter: alpha(opacity=20);
  border: 1em solid #fff;
  border-color: transparent #fff transparent #fff;
  border-radius: 1em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.switch-led:after {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  color: #666;
  font-family: arial, verdana, sans-serif;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0.1em rgba(0,0,0,0.7);
}

.switch-led-green:after {
  content: 'ON';
  top: -1.8em;
}

.switch-led-red:after {
  content: 'OFF';
  bottom: -1.8em;
}

.switch-led-green {
  top: -5em;
  border-top: 0.1em solid rgba(0,161,75,0.5);
  border-bottom: 0.1em solid rgba(255,255,255,0.25);
}

.switch-led-green .switch-led-light {
  background: rgb(0,161,75);
  border: 0.1em solid rgb(0,104,56);
}

.switch-led-red {
  bottom: -5em;
  border-top: 0.1em solid rgba(237,28,36,0.2);
  border-bottom: 0.1em solid rgba(255,255,255,0.25);
  -webkit-box-shadow: 0 0 3em rgb(237,28,36);
  -moz-box-shadow: 0 0 3em rgb(237,28,36);
  box-shadow: 0 0 3em rgb(237,28,36);
}

.switch-led-red .switch-led-light {
  background: rgb(237,28,36);
  border: 0.1em solid rgb(161,30,45);
}

.switch-led-red .switch-led-glow {
  background: #fff;
  background: rgba(255, 255, 255, 0.3);
  filter: alpha(opacity=30);
}

/* Switch on */

.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {
  top: 1.5em;
  border-bottom: 0;
  border-top: 4.5em solid #111;
}

.switch input:checked~.switch-handle {
  top: 1.5em;
}

.switch input:checked~.switch-handle-top {
  top: -1em;
  border-top: 0;
  border-bottom: 0.2em solid #AEB2B3;
}

.switch input:checked~.switch-handle-bottom {
  top: 4.2em;
  border-top: 0;
  border-bottom: 0.2em solid #141414;
}

.switch input:checked~.switch-handle-base {
  top: 4.5em;
  border-top: 0;
  border-bottom: 0.2em solid rgba(255,255,255,0.35);
}

.switch input:checked~.switch-led-green {
  -webkit-box-shadow: 0 0 3em rgb(0,161,75);
  -moz-box-shadow: 0 0 3em rgb(0,161,75);
  box-shadow: 0 0 3em rgb(0,161,75);
}

.switch input:checked~.switch-led-green .switch-led-glow {
  background: #fff;
  background: rgba(255, 255, 255, 0.4);
  filter: alpha(opacity=40);
}

.switch input:checked~.switch-led-red {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.switch input:checked~.switch-led-red .switch-led-glow {
  background: rgba(255, 255, 255, 0);
  filter: alpha(opacity=0);
}

#switchwhite {
  visibility: hidden;
  clip: rect(0 0 0 0);
  position: absolute;
  left: 9999px;
}

.switchwhite {
  display: block;
  width: 130px;
  height: 60px;
  margin: 70px auto;
  position: relative;
  background: #ced8da;
 /* Old browsers */
  background: -moz-linear-gradient(left,  #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%);
 /* FF3.6+ */
  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+ */
  background: -webkit-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
 /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
 /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
 /* IE10+ */
  background: linear-gradient(to right,  #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);
 /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );
 /* IE6-9 */
  transition: all 0.2s ease-out;
  cursor: pointer;
  border-radius: 0.35em;
  box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 1px rgba(0,0,0,0.3),
    0 8px 10px rgba(0,0,0,0.15);
}

.switchwhite:before {
  display: block;
  position: absolute;
  left: -35px;
  right: -35px;
  top: -25px;
  bottom: -25px;
  z-index: -2;
  content: "";
  border-radius: 0.4em;
  background: #d5dde0;
  background: linear-gradient(#d7dfe2, #bcc7cd);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -1px 1px 1px rgba(0,0,0,0.3),
    0 0 8px 2px rgba(0,0,0,0.2),
    0 2px 4px 2px rgba(0,0,0,0.1);
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.switchwhite:after {
  content: "";
  position: absolute;
  right: -25px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #788b91;
  margin-top: -8px;
  z-index: -1;
  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
    inset 0 -2px 2px rgba(0,0,0,0.2),
    0 1px 0 white,
    0 -1px 0 rgba(0,0,0,0.5),
    -47px 32px 15px 13px rgba(0,0,0,0.25);
}

#switchwhite:checked ~ .switchwhite {
  background: #b7bfc2;
 /* Old browsers */
  background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%);
 /* FF3.6+ */
  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+ */
  background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
 /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
 /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
 /* IE10+ */
  background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);
 /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );
 /* IE6-9 */
}

#switchwhite:checked ~ .switchwhite:after {
  background: #b1ffff;
  box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),
    inset 0 -2px 2px rgba(0,0,0,0.2),
    0 1px 0 white,
    0 -1px 0 rgba(0,0,0,0.5),
    -110px 32px 15px 13px rgba(0,0,0,0.25);
}

Toggle prefixes

1.2K views

Copy to Figma

1.2K views

Comments

XUTPRO 6. April at 14:53

6. April at 14:53

Looks great, lots of work for you to make this thanks! I'd like to use your switch, but have it appear in the OFF position when the page is first loaded. makes more sense for the switch to be off first.

No variations yet

MIT License

Copyright - 2024 https://codepen.io/bhargavmdubal/pen/wvQBMqQ 
Copyright - 2024 csemszepp  

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.