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/* ============================ */
11/* <style for bg> ======== */
12.background {
13  border-radius: 16px;
14  border: 1px solid #1a1a1a;
15  background: rgba(74, 74, 74, 0.39);
16  mix-blend-mode: luminosity;
17  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.20);
18  backdrop-filter: blur(15px);
19  width: 65px;
20  height: 65px;
21  display: flex;
22  justify-content: center;
23  align-items: center;
24}
25
26/* <style for menu__icon> ======== */
27.menu__icon {
28  width: 32px;
29  height: 32px;
30  padding: 4px;
31}
32
33.menu__icon span {
34  display: block;
35  width: 100%;
36  height: 0.125rem;
37  border-radius: 2px;
38  background-color: rgb(0, 122, 255);
39  box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2);
40  transition: background-color .4s;
41  position: relative;
42}
43
44.menu__icon span+span {
45  margin-top: .375rem;
46}
47
48.menu__icon span:nth-child(1) {
49  animation: ease .8s menu-icon-top-2 forwards;
50}
51
52.menu__icon span:nth-child(2) {
53  animation: ease .8s menu-icon-scaled-2 forwards;
54}
55
56.menu__icon span:nth-child(3) {
57  animation: ease .8s menu-icon-bottom-2 forwards;
58}
59
60.menu__icon:hover span:nth-child(1) {
61  animation: ease .8s menu-icon-top forwards;
62}
63
64.menu__icon:hover span:nth-child(2) {
65  animation: ease .8s menu-icon-scaled forwards;
66}
67
68.menu__icon:hover span:nth-child(3) {
69  animation: ease .8s menu-icon-bottom forwards;
70  background-color: rgb(255, 59, 48);
71}
72
73@keyframes menu-icon-top {
74  0% {
75    top: 0;
76    transform: rotate(0);
77  }
78
79  50% {
80    top: .5rem;
81    transform: rotate(0);
82  }
83
84  100% {
85    top: .5rem;
86    transform: rotate(45deg);
87  }
88}
89
90@keyframes menu-icon-top-2 {
91  0% {
92    top: .5rem;
93    transform: rotate(45deg);
94  }
95
96  50% {
97    top: .5rem;
98    transform: rotate(0);
99  }
100
101  100% {
102    top: 0;
103    transform: rotate(0);
104  }
105}
106
107@keyframes menu-icon-bottom {
108  0% {
109    bottom: 0;
110    transform: rotate(0);
111  }
112
113  50% {
114    bottom: .5rem;
115    transform: rotate(0);
116  }
117
118  100% {
119    bottom: .5rem;
120    transform: rotate(135deg);
121  }
122}
123
124@keyframes menu-icon-bottom-2 {
125  0% {
126    bottom: .5rem;
127    transform: rotate(135deg);
128  }
129
130  50% {
131    bottom: .5rem;
132    transform: rotate(0);
133  }
134
135  100% {
136    bottom: 0;
137    transform: rotate(0);
138  }
139}
140
141@keyframes menu-icon-scaled {
142  50% {
143    transform: scale(0);
144  }
145
146  100% {
147    transform: scale(0);
148  }
149}
150
151@keyframes menu-icon-scaled-2 {
152  0% {
153    transform: scale(0);
154  }
155
156  50% {
157    transform: scale(0);
158  }
159
160  100% {
161    transform: scale(1);
162  }
163}