Switch by simontheonlyone

1.switch {
2  font-size: 17px;
3  position: relative;
4  display: inline-block;
5  width: 6em;
6  height: 6em;
7}
8
9.switch input {
10  opacity: 0;
11  width: 0;
12  height: 0;
13}
14
15.slider {
16  inset: 0;
17  background-color: #333;
18  border-radius: 30px;
19}
20
21.slider:before {
22  height: 0.8em;
23  width: 1.1em;
24  inset: 44px 28px;
25  background: #eee;
26  border-radius: 4px;
27}
28
29.battery {
30  height: 1.4em;
31  width: 2.9em;
32  inset: 39px 23px;
33  border: 2px solid #eee;
34  border-radius: 8px;
35}
36
37.battery:before {
38  height: 0.4em;
39  width: 0.1em;
40  inset: 0.4em 50px;
41  border: none;
42  border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;
43  background: #eee;
44}
45
46.switch input:checked + .slider {
47  background-color: #eee;
48  box-shadow: 0 0 1px #eee;
49}
50
51.switch input:checked ~ .battery {
52  border: 2px solid #111;
53}
54
55.switch input:checked ~ .battery:before {
56  background: #111;
57}
58
59.switch input:checked + .slider:before {
60  background: rgb(255, 176, 85);
61  animation: lowbattery 1.6s linear;
62}
63
64@keyframes lowbattery {
65  0% {
66    width: 1.1em;
67  }
68  40% {
69    width: 2.3em;
70  }
71  70% {
72    width: 2.3em;
73  }
74  100% {
75    width: 1.1em;
76  }
77}
78
79.slider,
80.battery,
81.slider:before,
82.battery:before {
83  position: absolute;
84  content: "";
85  transition: 0.5s;
86}
87