Switch by MetaBlue2000

1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 3.5em;
7  height: 0.25em;
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  top: 0;
22  left: 0;
23  right: 0;
24  bottom: 0;
25  background-color: hotpink;
26  transition: 0.4s;
27  border-radius: 30px;
28}
29
30.slider:before {
31  position: absolute;
32  content: "O";
33  display: grid;
34  text-align: center;
35  vertical-align: middle;
36  place-items: center;
37  font-size: 1em;
38  font-weight: 900;
39  width: 2em;
40  aspect-ratio: 1;
41  border-radius: 50%;
42  bottom: 0.3em;
43  left: 0;
44  top: 50%;
45  transform: translate(0, -50%);
46  color: hotpink;
47  background-color: pink;
48  border: 1px solid rgba(255, 105, 180, 0.507);
49  transition: 0.4s;
50}
51
52.switch input:checked + .slider {
53  background-color: teal;
54}
55
56.switch input:checked + .slider:before {
57  content: "\002713";
58  color: teal;
59  background: paleturquoise;
60  border: 1px solid rgba(0, 128, 128, 0.514);
61  transform: translate(1.75em, -50%) rotateZ(360deg);
62}
63