Switch by Yaya12085

1#checkbox {
2  display: none;
3}
4
5.toggle {
6  position: relative;
7  width: 40px;
8  height: 40px;
9  cursor: pointer;
10  display: flex;
11  flex-direction: column;
12  align-items: flex-start;
13  justify-content: center;
14  gap: 10px;
15  transition-duration: .5s;
16}
17
18.bars {
19  width: 100%;
20  height: 4px;
21  background-color: rgb(92, 130, 255);
22  border-radius: 4px;
23}
24
25#bar2 {
26  transition-duration: .8s;
27}
28
29#bar1 {
30  width: 50%;
31}
32
33#bar2 {
34  width: 75%;
35}
36
37#checkbox:checked + .toggle .bars {
38  position: absolute;
39  transition-duration: .5s;
40}
41
42#checkbox:checked + .toggle #bar2 {
43  transform: scaleX(0);
44  transition-duration: .1s;
45}
46
47#checkbox:checked + .toggle #bar1 {
48  width: 100%;
49  transform: rotate(45deg);
50  transition-duration: .5s;
51}
52
53#checkbox:checked + .toggle #bar3 {
54  width: 100%;
55  transform: rotate(-45deg);
56  transition-duration: .5s;
57}
58
59#checkbox:checked + .toggle {
60  transition-duration: .5s;
61  transform: rotate(180deg);
62}