1/* The switch - the box around the slider */
2.switch {
3 font-size: 1rem;
4 position: relative;
5 display: inline-block;
6 width: 4em;
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 inset: 0;
22 background-color: #eee;
23 transition: 0.4s;
24 border-radius: 0.5em;
25 box-shadow: 0 0.2em #dfd9d9;
26}
27
28.slider:before {
29 position: absolute;
30 content: "";
31 height: 1.5em;
32 width: 1.4em;
33 border-radius: 0.3em;
34 left: 0.3em;
35 bottom: 0.7em;
36 background-color: lightsalmon;
37 transition: 0.4s;
38 box-shadow: 0 0.4em #bcb4b4;
39}
40
41.slider:hover::before {
42 box-shadow: 0 0.2em #bcb4b4;
43 bottom: 0.5em;
44}
45
46input:checked+.slider:before {
47 transform: translateX(2em);
48 background: lightgreen;
49}