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 input {
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: rgb(0, 0, 0);
26  transition: .4s;
27  border-radius: 30px;
28}
29
30.slider:before {
31  position: absolute;
32  content: "";
33  height: 1.4em;
34  width: 1.4em;
35  border-radius: 20px;
36  left: 0.3em;
37  bottom: 0.3em;
38  background-color: rgb(219, 198, 2);
39  transition: .4s;
40}
41
42input:checked + .slider {
43  background-color: #000000;
44}
45
46input:focus + .slider {
47  box-shadow: 0 0 1px #000000;
48}
49
50input:checked + .slider:before {
51  transform: translateX(1.5em);
52}
53
54.slider::after {
55  width: 20px;
56  height: 20px;
57  left: 20%;
58  top: 10%;
59  border-radius: 50%;
60  position: absolute;
61  content: "";
62  background-color: rgb(0, 0, 0);
63  transition: ease 0.4s;
64}
65
66input:checked + .slider::after {
67  left: 80%;
68  width: 0px;
69  height: 0px;
70}