Switch by Creatlydev

1.icon-menu {
2  --gap: 5px;
3  --height-bar: 2.5px;
4  --pos-y-bar-one: 0;
5  --pos-y-bar-three: 0;
6  --scale-bar: 1;
7  --rotate-bar-one: 0;
8  --rotate-bar-three: 0;
9  width: 25px;
10  display: flex;
11  flex-direction: column;
12  gap: var(--gap);
13  cursor: pointer;
14  position: relative;
15}
16
17.bar {
18  position: relative;
19  height: var(--height-bar);
20  width: 100%;
21  border-radius: .5rem;
22  background-color: #9941fc;
23}
24
25.bar--1 {
26  top: var(--pos-y-bar-one);
27  transform: rotate(var(--rotate-bar-one));
28  transition: top 200ms 100ms, transform 100ms;
29}
30
31.bar--2 {
32  transform: scaleX(var(--scale-bar));
33  transition: transform 150ms 100ms;
34}
35
36.bar--3 {
37  bottom: var(--pos-y-bar-three);
38  transform: rotate(var(--rotate-bar-three));
39  transition: bottom 200ms 100ms, transform 100ms;
40}
41
42.check-icon:checked + .icon-menu > .bar--1 {
43  transition: top 200ms, transform 200ms 100ms;
44}
45
46.check-icon:checked + .icon-menu > .bar--3 {
47  transition: bottom 200ms, transform 200ms 100ms;
48}
49
50.check-icon:checked + .icon-menu {
51  --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
52  --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
53  --scale-bar: 0;
54  --rotate-bar-one: 45deg;
55  --rotate-bar-three: -45deg;
56}
57/* FIN ICON-MENU */
58
59
60