1.wave-menu {
2  border: 4px solid #545FE5;
3  border-radius: 50px;
4  width: 200px;
5  height: 45px;
6  display: flex;
7  justify-content: center;
8  align-items: center;
9  padding: 0;
10  margin: 0;
11  cursor: pointer;
12  transition: ease 0.2s;
13  position: relative;
14  background: #fff;
15}
16
17.wave-menu li {
18  list-style: none;
19  height: 30px;
20  width: 4px;
21  border-radius: 10px;
22  background: #545FE5;
23  margin: 0 6px;
24  padding: 0;
25  animation-name: wave1;
26  animation-duration: 0.3s;
27  animation-iteration-count: infinite;
28  animation-direction: alternate;
29  transition: ease 0.2s;
30}
31
32.wave-menu:hover > li {
33  background: #fff;
34}
35
36.wave-menu:hover {
37  background: #545FE5;
38}
39
40.wave-menu li:nth-child(2) {
41  animation-name: wave2;
42  animation-delay: 0.2s;
43}
44
45.wave-menu li:nth-child(3) {
46  animation-name: wave3;
47  animation-delay: 0.23s;
48  animation-duration: 0.4s;
49}
50
51.wave-menu li:nth-child(4) {
52  animation-name: wave4;
53  animation-delay: 0.1s;
54  animation-duration: 0.3s;
55}
56
57.wave-menu li:nth-child(5) {
58  animation-delay: 0.5s;
59}
60
61.wave-menu li:nth-child(6) {
62  animation-name: wave2;
63  animation-duration: 0.5s;
64}
65
66.wave-menu li:nth-child(8) {
67  animation-name: wave4;
68  animation-delay: 0.4s;
69  animation-duration: 0.25s;
70}
71
72.wave-menu li:nth-child(9) {
73  animation-name: wave3;
74  animation-delay: 0.15s;
75}
76
77@keyframes wave1 {
78  from {
79    transform: scaleY(1);
80  }
81
82  to {
83    transform: scaleY(0.5);
84  }
85}
86
87@keyframes wave2 {
88  from {
89    transform: scaleY(0.3);
90  }
91
92  to {
93    transform: scaleY(0.6);
94  }
95}
96
97@keyframes wave3 {
98  from {
99    transform: scaleY(0.6);
100  }
101
102  to {
103    transform: scaleY(0.8);
104  }
105}
106
107@keyframes wave4 {
108  from {
109    transform: scaleY(0.2);
110  }
111
112  to {
113    transform: scaleY(0.5);
114  }
115}
116