Switch by mrhyddenn

1input {
2  display: none
3}
4
5.on,.off {
6  position: absolute;
7  text-align: center;
8  text-shadow: inset 1px 1px 1px black;
9  width: 100%;
10}
11
12.on {
13  color: #fff;
14  top: 10px;
15  transition: all 0.1s;
16  font-family: sans-serif
17}
18
19.off {
20  color: #636161;
21  bottom: 5px;
22  transition: all 0.1s;
23  transform: scaleY(0.85);
24}
25
26.but {
27  background-color: #000;
28  border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;
29  border-bottom-width: 0px;
30  box-shadow: inset 8px 6px 5px -7px rgba(0,0,0,1)
31    ,inset -8px 6px 5px -7px rgba(0,0,0,1)
32    ,inset 0 -3px 2px -2px rgba(200,200,200,.5)
33    ,0 3px 3px -2px rgba(0,0,0,1)
34    ,inset 0 -230px 60px -200px rgba(255,255,255,.2)
35    ,inset 0 220px 40px -200px rgba(0,0,0,.3);
36  display: block;
37  font-size: 17px;
38  height: 60px;
39  position: relative;
40  transition: all 0.2s;
41  width: 40px;
42}
43
44.back {
45  background-color: #000;
46  background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 65%)
47    ,-webkit-linear-gradient(0deg, rgba(245, 245, 245, 0) 30%, rgba(150,150,150,.1) 50%, rgba(150,150,150,0) 70%);
48  border-radius: 115px;
49  box-sizing: border-box;
50  height: 85px;
51  padding: 4px 4px;
52  transition: all 0.2s;
53  width: 50px;
54}
55
56input:checked + .back .on,input:checked + .back .off {
57  text-shadow: inset 1px 1px 1px black;
58}
59
60input:checked + .back .on {
61  color: rgb(141, 141, 141);
62  top: 10px;
63  transform: scaleY(0.85);
64}
65
66input:checked + .back .off {
67  color: #fff;
68  bottom: 5px;
69  transform: scaleY(1);
70}
71
72input:checked + .back .but {
73  background: #232323;
74  background-image: -webkit-radial-gradient(55% 18%,circle closest-corner,rgba(0,0,0,.3) ,rgba(0,0,0,0));
75  border-radius: 410px 410px 410px 410px / 310px 310px 410px 410px;
76  box-shadow: inset 8px -4px 5px -7px rgba(0,0,0,1)
77    ,inset -8px -4px 5px -7px rgba(0,0,0,1)
78    , 0 -3px 8px -4px rgba(250,250,250,.4)
79    ,inset 0 3px 4px -2px rgba(10,10,10,1)
80    ,inset 0 280px 40px -200px rgba(0,0,0,.2)
81    ,inset 0 -200px 40px -200px rgba(180,180,180,.2);
82  margin-top: 20px;
83}
84
85input:checked + .back {
86  background-image: -webkit-linear-gradient(90deg, black 30%, transparent 65%)
87    ,-webkit-linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.4) 50%, rgba(150,150,150,0) 100%);
88  box-shadow: 28px 28px 28px -28px rgba(0,0,0,.1)
89    ,-28px 28px 28px -22px rgba(0,0,0,.1)
90    ,0 30px 30px 0px rgba(0,0,0,.2)
91    ,inset 0 1px 2px 0 rgba(0,0,0,.6);
92  padding: 2px 4px;
93}
94
95.l,.r {
96  margin: 0 auto;
97  text-align: center;
98}
99
100.round,#onoff,.back,.but,.on,.off {
101  user-select: none;
102}