Switch by 3bdel3ziz-T

1.toggle-label {
2  width: 100px;
3  height: 50px;
4  cursor: pointer;
5  display: inline-block;
6  padding: 5px;
7  background: #272727;
8  border-radius: 50px;
9  box-shadow: 0px 0px 16px -8px #fefefe;
10  user-select: none;
11}
12
13.toggle-label::before,
14.toggle-label::after {
15  content: "pause";
16  overflow: hidden;
17  font-size: 100px;
18  text-transform: uppercase;
19  position: absolute;
20  left: 50%;
21  top: 40%;
22  transition: 200ms;
23  transform: translate(-50%, -50%);
24  z-index: -1;
25  font-family: sans-serif;
26  font-weight: 300;
27  color: transparent;
28  -webkit-text-stroke-color: #272727;
29  -webkit-text-stroke-width: 1px;
30  transition: 700ms;
31}
32
33.toggle-label::after {
34  content: "play";
35  transform: translate(0, -50%);
36  trnasition: 700ms;
37  left: -100%;
38  transform: translate(0, -50%);
39}
40
41.toggle-label .circle {
42  appearance: none;
43  position: relative;
44  width: 40px;
45  height: 40px;
46  background: #5e5e5e;
47  border-radius: 50%;
48  transition: all 0.5s cubic-bezier(1, 0, 0, 1);
49  left: 0;
50}
51
52.toggle-label .circle:checked {
53  background: #f43f5e;
54  left: calc(100% - 40px);
55}
56
57.toggle-label .circle::before,
58.toggle-label .circle::after {
59  content: "";
60  position: absolute;
61  top: 50%;
62  left: 50%;
63  transform: translate(-50%, -50%);
64  display: inline-block;
65  width: 0;
66  height: 0;
67  border: 10px solid transparent;
68  margin-left: 10px;
69  border-left-color: #fefefe;
70  z-index: 3;
71  transition: 200ms;
72}
73
74.toggle-label:has(.circle:checked)::before {
75  left: 100%;
76  transform: translate(0, -50%);
77}
78.toggle-label:has(.circle:checked)::after {
79  left: 50%;
80  transform: translate(-50%, -50%);
81}
82.toggle-label .circle::after {
83  border: none;
84  margin-left: -5px;
85  height: 18px;
86  width: 3px;
87  background-color: #fefefe;
88  transition-delay: 150ms;
89}
90
91.toggle-label .circle::before {
92  transition-delay: 50ms;
93}
94
95.toggle-label .circle:checked::before {
96  opacity: 0;
97}
98
99.toggle-label .circle:checked::after {
100  width: 20px;
101  height: 20px;
102  margin-left: 0px;
103  border-radius: 5px;
104}
105