Button by pritamjoardar

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