1button {
2  position: relative;
3  padding: 15px 45px;
4  background: #FEC195;
5  font-size: 17px;
6  font-weight: 500;
7  color: #181818;
8  border: 1px solid #FEC195;
9  border-radius: 8px;
10  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .2));
11}
12
13button:hover {
14  border: 1px solid #f3b182;
15  background: linear-gradient(85deg, #FEC195, #fcc196, #fabd92, #fac097, #fac39c);
16  animation: wind 2s ease-in-out infinite;
17}
18
19@keyframes wind {
20  0% {
21    background-position: 0% 50%;
22  }
23
24  0% {
25    background-position: 50% 100%;
26  }
27
28  0% {
29    background-position: 0% 50%;
30  }
31}
32
33.icon-1 {
34  position: absolute;
35  top: 0;
36  right: 0;
37  width: 25px;
38  transform-origin: 0 0;
39  transform: rotate(10deg);
40  transition: all .5s ease-in-out;
41  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .3));
42}
43
44button:hover .icon-1 {
45  animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;
46  transform: rotate(10deg);
47}
48
49@keyframes slay-1 {
50  0% {
51    transform: rotate(10deg);
52  }
53
54  50% {
55    transform: rotate(-5deg);
56  }
57
58  100% {
59    transform: rotate(10deg);
60  }
61}
62
63.icon-2 {
64  position: absolute;
65  top: 0;
66  left: 25px;
67  width: 12px;
68  transform-origin: 50% 0;
69  transform: rotate(10deg);
70  transition: all 1s ease-in-out;
71  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
72}
73
74button:hover .icon-2 {
75  animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
76  transform: rotate(0);
77}
78
79@keyframes slay-2 {
80  0% {
81    transform: rotate(0deg);
82  }
83
84  50% {
85    transform: rotate(15deg);
86  }
87
88  100% {
89    transform: rotate(0);
90  }
91}
92
93.icon-3 {
94  position: absolute;
95  top: 0;
96  left: 0;
97  width: 18px;
98  transform-origin: 50% 0;
99  transform: rotate(-5deg);
100  transition: all 1s ease-in-out;
101  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .5));
102}
103
104button:hover .icon-3 {
105  animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
106  transform: rotate(0);
107}
108
109@keyframes slay-3 {
110  0% {
111    transform: rotate(0deg);
112  }
113
114  50% {
115    transform: rotate(-5deg);
116  }
117
118  100% {
119    transform: rotate(0);
120  }
121}