1.button {
2 display: inline-block;
3 width: 50px;
4 height: 20px;
5 background-color: #fff;
6 border-radius: 30px;
7 cursor: pointer;
8 padding: 0;
9}
10
11#toggle {
12 display: none;
13}
14
15.slider {
16 display: block;
17 font-size: 10px;
18 position: relative;
19}
20
21.slider::after {
22 content: 'OFF';
23 width: 25px;
24 height: 25px;
25 background-color: #e03c3c;
26 border: 2px solid #fff;
27 border-radius: 50%;
28 box-shadow: 0 0 5px rgba(0, 0, 0, .25);
29 position: absolute;
30 top: -5px;
31 left: 0;
32 display: grid;
33 place-content: center;
34 line-height: 0;
35 transition: background-color .25s, transform .25s ease-in;
36}
37
38#toggle:checked + .slider::after {
39 content: 'ON';
40 background-color: #05ae3e;
41 transform: translateX(25px) rotate(360deg);
42}