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: center;
35}
36
37.menu__icon span {
38  width: 100%;
39  height: 0.125rem;
40  border-radius: 0.125rem;
41  background-color: rgb(0, 122, 255);
42  box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2);
43  transition: transform .4s, background-color .4s, opacity .4s;
44}
45
46.menu__icon:hover span:nth-child(1) {
47  background-color: rgb(255, 59, 48);
48  transform: translateY(11px) rotate(-45deg);
49}
50
51.menu__icon:hover span:nth-child(2) {
52  transform: translate(-50%);
53  opacity: 0;
54}
55
56.menu__icon:hover span:nth-child(3) {
57  background-color: rgb(255, 59, 48);
58  transform: translateY(-11px) rotate(45deg);
59}