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: center;
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(176, 92, 255);
22  border-radius: 4px;
23}
24
25#bar2 {
26  transition-duration: .8s;
27}
28
29#bar1,#bar3 {
30  width: 70%;
31}
32
33#checkbox:checked + .toggle .bars {
34  position: absolute;
35  transition-duration: .5s;
36}
37
38#checkbox:checked + .toggle #bar2 {
39  transform: scaleX(0);
40  transition-duration: .5s;
41}
42
43#checkbox:checked + .toggle #bar1 {
44  width: 100%;
45  transform: rotate(45deg);
46  transition-duration: .5s;
47}
48
49#checkbox:checked + .toggle #bar3 {
50  width: 100%;
51  transform: rotate(-45deg);
52  transition-duration: .5s;
53}
54
55#checkbox:checked + .toggle {
56  transition-duration: .5s;
57  transform: rotate(180deg);
58}