Button by ArturCodeCraft

1/* <reset-style> ============================ */
2button {
3  border: none;
4  background: none;
5  padding: 0;
6  margin: 0;
7  cursor: pointer;
8  font-family: inherit;
9}
10/* <main-style> ============================ */
11.menu__icon {
12  width: 2rem;
13  height: 2rem;
14  padding: .25rem;
15  background-color: rgb(29, 29, 31, .7);
16  backdrop-filter: saturate(180%) blur(20px);
17  border: solid 1px rgba(66,66,69,0.7);
18  position: relative;
19}
20
21.menu__icon span {
22  width: 1.5rem;
23  height: 1.5rem;
24  position: absolute;
25  top: calc(.25rem - 1px);
26  left: calc(.25rem - 1px);
27  transition: transform .1806s cubic-bezier(.04,.04,.12,.96);
28}
29
30.menu__icon span:before {
31  content: '';
32  width: 1.5rem;
33  height: .125rem;
34  background-color: #fff;
35  position: absolute;
36  left: 0;
37  transition: transform .1596s cubic-bezier(.52,.16,.52,.84) .1008s;
38}
39
40.menu__icon span:nth-child(1)::before {
41  top: .625rem;
42  transform: translateY(-3px);
43}
44
45.menu__icon span:nth-child(2)::before {
46  bottom: .625rem;
47  transform: translateY(3px);
48}
49
50.menu__icon:hover :nth-child(1),
51.menu__icon:hover :nth-child(2) {
52  transition: transform .3192s cubic-bezier(.04,.04,.12,.96) .1008s;
53}
54
55.menu__icon:hover :nth-child(1)::before,
56.menu__icon:hover :nth-child(2)::before {
57  transform: none;
58  transition: transform .1806s cubic-bezier(.04,.04,.12,.96);
59}
60
61.menu__icon:hover :nth-child(1) {
62  transform: rotate(45deg) translateY(1px);
63}
64
65.menu__icon:hover :nth-child(2) {
66  transform: rotate(-45deg) translateY(-1px);
67}