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