1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 3.5em;
7  height: 2em;
8}
9
10/* Hide default HTML checkbox */
11.switch .checkbox {
12  opacity: 0;
13  width: 0;
14  height: 0;
15}
16
17/* The slider */
18.slider {
19  position: absolute;
20  cursor: pointer;
21  top: 0;
22  left: 0;
23  right: 0;
24  bottom: 0;
25  background-color: #ccc;
26  transition: .4s;
27  border-radius: 30px;
28  box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;
29}
30
31.slider:before {
32  position: absolute;
33  content: "";
34  height: 1.4em;
35  width: 1.4em;
36  border-radius: 20px;
37  left: 0.3em;
38  bottom: 0.3em;
39  background-color: white;
40  transition: .4s;
41}
42
43.checkbox:checked + .slider:before {
44  box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;
45}
46
47.checkbox:checked + .slider {
48  background-color: #afa2a2;
49  box-shadow: 2px 2px 2px 2px #222831, -2px -2px 2px 2px #393E46, -2px 2px 2px 2px #00ADB5, 2px -2px 2px 2px #EEEEEE;
50}
51
52.checkbox:checked + .slider:before {
53  transform: translateX(1.5em);
54}