1input[type = "checkbox"] {
2  visibility: hidden;
3  display: none;
4  appearance: none;
5  -webkit-appearance: none;
6}
7
8label.container {
9  display: block;
10  width: 60px;
11  height: 30px;
12  background: #d3d3d3;
13  border-radius: 50px;
14  position: relative;
15  cursor: pointer;
16  box-shadow: 9px 9px 29px #969696,
17             -9px -9px 29px #ffffff;
18}
19
20label.shadow {
21  width: 50px;
22  height: 20px;
23  position: absolute;
24  border-radius: 50px;
25  left: 5px;
26  top: 5px;
27  box-shadow: inset 3px 3px 10px #969696,
28              inset -3px -3px 5px #ffffffbd;
29  cursor: pointer;
30}
31
32.container span {
33  display: inline-block;
34  width: 20px;
35  height: 20px;
36  background-color: #ffaa00;
37  margin: 5px;
38  border-radius: 50px;
39  font-size: 20px;
40  transition: all 0.3s ease-in;
41  position: relative;
42  left: 0;
43  z-index: 1;
44}
45
46.container span::after {
47  position: absolute;
48  top: 6px;
49  left: 4px;
50  transition-delay: 5s;
51}
52
53input[type = "checkbox"]:checked ~ span {
54  left: 29px;
55  transition: 0.3s ease-in;
56  background: #0a100d;
57  transform: rotate(220deg);
58}