1.switch input {
2  display: none;
3}
4
5.switch {
6  box-sizing: border-box;
7  display: flex;
8  align-items: center;
9  width: 50px;
10  height: 24px;
11  background: #4d4d4d;
12  border-radius: 100px;
13  padding: 0 2px;
14  transition: .3s;
15  cursor: pointer;
16  position: relative;
17}
18
19.slider {
20  display: flex;
21  align-items: center;
22  width: 20px;
23  height: 20px;
24  background: white;
25  border-radius: 100px;
26  transition: .3s;
27  border: 1px solid transparent;
28  z-index: 1000;
29}
30
31.icon {
32  display: block;
33  position: absolute;
34  transition: .3s;
35}
36
37.sun {
38  right: 2px;
39  opacity: 1;
40}
41
42.moon {
43  left: 2px;
44  opacity: 0;
45}
46
47.switch:hover .slider, .switch:focus .slider {
48  border: 1px solid #4d4d4d;
49  box-shadow: 0 0 2px 3px #86d46b;
50}
51
52.switch:active .slider {
53  box-shadow: 0 0 5px 5px #86d46b;
54}
55
56.switch input:checked+.slider {
57  transform: translateX(26px);
58}
59
60.switch input:checked~.moon {
61  opacity: 1;
62}
63
64.switch input:checked~.sun {
65  opacity: 0;
66}