Switch by faxriddin20

1.toggle-wrapper {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  position: relative;
6  border-radius: 0.5em;
7  padding: 0.125em;
8  background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);
9  box-shadow: 0 1px 1px rgb(255 255 255 / 0.6);
10  /* resize for demo */
11  font-size: 1.5em;
12}
13
14.toggle-checkbox {
15  appearance: none;
16  position: absolute;
17  z-index: 1;
18  border-radius: inherit;
19  width: 100%;
20  height: 100%;
21  /* fix em sizing */
22  font: inherit;
23  opacity: 0;
24  cursor: pointer;
25}
26
27.toggle-container {
28  display: flex;
29  align-items: center;
30  position: relative;
31  border-radius: 0.375em;
32  width: 3em;
33  height: 1.5em;
34  background-color: #e8e8e8;
35  box-shadow: inset 0 0 0.0625em 0.125em rgb(255 255 255 / 0.2),
36    inset 0 0.0625em 0.125em rgb(0 0 0 / 0.4);
37  transition: background-color 0.4s linear;
38}
39
40.toggle-checkbox:checked + .toggle-container {
41  background-color: lime;
42}
43
44.toggle-button {
45  display: flex;
46  justify-content: center;
47  align-items: center;
48  position: absolute;
49  left: 0.0625em;
50  border-radius: 0.3125em;
51  width: 1.375em;
52  height: 1.375em;
53  background-color: #e8e8e8;
54  box-shadow: inset 0 -0.0625em 0.0625em 0.125em rgb(0 0 0 / 0.1),
55    inset 0 -0.125em 0.0625em rgb(0 0 0 / 0.2),
56    inset 0 0.1875em 0.0625em rgb(255 255 255 / 0.3),
57    0 0.125em 0.125em rgb(0 0 0 / 0.5);
58  transition: left 0.4s;
59}
60
61.toggle-checkbox:checked + .toggle-container > .toggle-button {
62  left: 1.5625em;
63}
64
65.toggle-button-circles-container {
66  display: grid;
67  grid-template-columns: repeat(3, min-content);
68  gap: 0.125em;
69  position: absolute;
70  margin: 0 auto;
71}
72
73.toggle-button-circle {
74  border-radius: 50%;
75  width: 0.125em;
76  height: 0.125em;
77  background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);
78}
79