1.switch {
2  --circle-dim: 1.4em;
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 3.5em;
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  top: 0;
22  left: 0;
23  right: 0;
24  bottom: 0;
25  background-color: #f5aeae;
26  transition: .4s;
27  border-radius: 30px;
28}
29
30.slider-card {
31  position: absolute;
32  content: "";
33  height: var(--circle-dim);
34  width: var(--circle-dim);
35  border-radius: 20px;
36  left: 0.3em;
37  bottom: 0.3em;
38  transition: .4s;
39  pointer-events: none;
40}
41
42.slider-card-face {
43  position: absolute;
44  inset: 0;
45  backface-visibility: hidden;
46  perspective: 1000px;
47  border-radius: 50%;
48  transition: .4s transform;
49}
50
51.slider-card-front {
52  background-color: #DC3535;
53}
54
55.slider-card-back {
56  background-color: #379237;
57  transform: rotateY(180deg);
58}
59
60input:checked ~ .slider-card .slider-card-back {
61  transform: rotateY(0);
62}
63
64input:checked ~ .slider-card .slider-card-front {
65  transform: rotateY(-180deg);
66}
67
68input:checked ~ .slider-card {
69  transform: translateX(1.5em);
70}
71
72input:checked ~ .slider {
73  background-color: #9ed99c;
74}