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  display: flex;
32  flex-direction: column;
33  justify-content: space-between;
34  align-items: end;
35  transition: transform .4s;
36}
37
38.menu__icon span {
39  width: 100%;
40  height: 0.25rem;
41  border-radius: 0.125rem;
42  background-color: rgb(0, 122, 255);
43  box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2);
44  transition: width .4s, transform .4s, background-color .4s;
45}
46
47.menu__icon :nth-child(2) {
48  width: 75%;
49}
50
51.menu__icon :nth-child(3) {
52  width: 50%;
53}
54
55.menu__icon:hover {
56  transform: rotate(-90deg);
57}
58
59.menu__icon:hover span {
60  width: .25rem;
61  transform: translateX(-10px);
62  background-color: rgb(255, 59, 48);
63}