1/*Design Inspired by @ykadosh on Codepen*/
2
3.back {
4  position: absolute;
5  width: 16.6em;
6  height: 6.5em;
7  margin-top: -0.8em;
8  margin-left: -0.77em;
9  border-radius: 70px;
10  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
11  background-color: #171717;
12}
13
14.main {
15  display: flex;
16}
17
18.switch {
19  display: block;
20  position: relative;
21  background-color: black;
22  width: 70px;
23  height: 70px;
24  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
25  border-radius: 50%;
26  padding: 20px;
27  margin: 5px;
28}
29
30.switch input {
31  display: none;
32}
33
34.switch input:checked + .button .light {
35  animation: flicker 0.2s infinite 0.3s;
36}
37
38.switch input:checked + .button .shine {
39  opacity: 1;
40}
41
42.switch input:checked + .button .shadow {
43  opacity: 0;
44}
45
46.switch .button {
47  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
48  background-color: #9b0621;
49  width: 55px;
50  height: 55px;
51  border-radius: 50%;
52  position: relative;
53  left: -0.75em;
54  top: -0.75em;
55  cursor: pointer;
56}
57
58.switch .light {
59  opacity: 0;
60  animation: light-off 1s;
61  position: absolute;
62  width: 100%;
63  height: 100%;
64  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
65}
66
67.switch .dots {
68  position: absolute;
69  width: 100%;
70  height: 100%;
71  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
72  background-size: 10px 10px;
73  border-radius: 50%;
74}
75
76@keyframes flicker {
77  0% {
78    opacity: 1;
79  }
80
81  80% {
82    opacity: 0.8;
83  }
84
85  100% {
86    opacity: 1;
87  }
88}
89
90@keyframes light-off {
91  0% {
92    opacity: 1;
93  }
94
95  80% {
96    opacity: 0;
97  }
98}
99
100.switch1 {
101  display: block;
102  position: relative;
103  background-color: black;
104  width: 70px;
105  height: 70px;
106  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
107  border-radius: 50%;
108  padding: 20px;
109  margin: 5px;
110}
111
112.switch1 input {
113  display: none;
114}
115
116.switch1 input:checked + .button .light {
117  animation: flicker 0.2s infinite 0.3s;
118}
119
120.switch1 input:checked + .button .shine {
121  opacity: 1;
122}
123
124.switch1 input:checked + .button .shadow {
125  opacity: 0;
126}
127
128.switch1 .button {
129  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
130  background-color: #949207;
131  width: 55px;
132  height: 55px;
133  border-radius: 50%;
134  position: relative;
135  left: -0.75em;
136  top: -0.785em;
137  cursor: pointer;
138}
139
140.switch1 .light {
141  opacity: 0;
142  animation: light-off 1s;
143  position: absolute;
144  width: 100%;
145  height: 100%;
146  background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%);
147}
148
149.switch1 .dots {
150  position: absolute;
151  width: 100%;
152  height: 100%;
153  background-image: radial-gradient(transparent 30%, rgba(91, 101, 0, 0.7) 70%);
154  background-size: 10px 10px;
155  border-radius: 50%;
156}
157
158.switch2 {
159  display: block;
160  position: relative;
161  background-color: black;
162  width: 70px;
163  height: 70px;
164  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;
165  border-radius: 50%;
166  padding: 20px;
167  margin: 5px;
168}
169
170.switch2 input {
171  display: none;
172}
173
174.switch2 input:checked + .button .light {
175  animation: flicker 0.2s infinite 0.3s;
176}
177
178.switch2 input:checked + .button .shine {
179  opacity: 1;
180}
181
182.switch2 input:checked + .button .shadow {
183  opacity: 0;
184}
185
186.switch2 .button {
187  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
188  background-color: #2f9407;
189  width: 55px;
190  height: 55px;
191  border-radius: 50%;
192  position: relative;
193  left: -0.75em;
194  top: -0.79em;
195  cursor: pointer;
196}
197
198.switch2 .light {
199  opacity: 0;
200  animation: light-off 1s;
201  position: absolute;
202  width: 100%;
203  height: 100%;
204  background-image: radial-gradient(#f6ff7e, #00ff00 40%, transparent 70%);
205}
206
207.switch2 .dots {
208  position: absolute;
209  width: 100%;
210  height: 100%;
211  background-image: radial-gradient(transparent 30%, rgba(0, 101, 13, 0.7) 70%);
212  background-size: 10px 10px;
213  border-radius: 50%;
214}