Switch by zebra76966

1.switch {
2  position: absolute;
3  top: 50%;
4  width: 30px;
5  height: 60px;
6  padding: 2px;
7  left: 50%;
8  transform: translate(-50%,-50%);
9}
10
11.switch input {
12  opacity: 0;
13  height: 0;
14  width: 0;
15}
16
17.slider {
18  position: absolute;
19  cursor: pointer;
20  top: 0;
21  left: 0;
22  right: 0;
23  bottom: 0;
24  border-radius: 20px;
25  border: 1px solid rgba(0,0,0,0.2);
26  border-style: outset;
27  background-color: white;
28  transition: 0.4s;
29}
30
31.slider::before {
32  content: "🌞";
33  font-size: 22px;
34  line-height: 15px;
35  border-radius: 100%;
36  position: absolute;
37  left: -0.8px;
38  top: 8px;
39  background-color: transparent;
40  transition: 0.4s;
41}
42
43.switch > input:checked + .slider {
44  background-color: #000429;
45}
46
47.switch > input:checked + .slider:before {
48  content: "🌑";
49  font-size: 22px;
50  line-height: 25px;
51  background-color: transparent;
52  transform: translateY(24px);
53}