Switch by adamgiebl

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