Button by MuhammadHasann

1button {
2  position: relative;
3  padding: 13px 35px;
4  background: #f5ddb7;
5  font-size: 17px;
6  font-weight: 900;
7  color: #181818;
8  border: none;
9  border-radius: 8px;
10  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
11  transition: all .3s ease-in-out;
12}
13
14.icon-1 {
15  position: absolute;
16  top: 10%;
17  left: 50%;
18  transform: translate(-50%, 0);
19  width: 0px;
20  height: auto;
21  transition: all .5s ease-in-out;
22  z-index: -1;
23}
24
25.icon-2 {
26  position: absolute;
27  top: 10%;
28  left: 50%;
29  transform: translate(-50%, 0);
30  width: 0px;
31  height: auto;
32  transition: all .5s ease-in-out;
33  z-index: -2;
34}
35
36.icon-3 {
37  position: absolute;
38  top: 10%;
39  left: 50%;
40  transform: translate(-50%, 0);
41  width: 0px;
42  height: auto;
43  transition: all .5s ease-in-out;
44  z-index: -2;
45}
46
47.icon-4 {
48  position: absolute;
49  top: 10%;
50  left: 50%;
51  transform: translate(-50%, 0);
52  width: 0px;
53  height: auto;
54  transition: all .5s ease-in-out;
55  z-index: -2;
56}
57
58.icon-5 {
59  position: absolute;
60  top: 10%;
61  left: 50%;
62  transform: translate(-50%, 0);
63  width: 0px;
64  height: auto;
65  transition: all .5s ease-in-out;
66  z-index: -2;
67}
68
69button:hover {
70  padding: 13px 25px;
71  border-radius: 8px 8px 24px 24px;
72}
73
74button:hover .icon-1 {
75  top: -250%;
76  left: 50%;
77  transform: translate(-50%, 0);
78  width: 50px;
79  height: auto;
80  animation: inIcon1 1s ease .45s forwards;
81}
82
83@keyframes inIcon1 {
84  0% {
85    transform-origin: 0 100%;
86    transform: translate(-50%, 0) rotate(0deg);
87  }
88
89  25% {
90    transform-origin: 0 100%;
91    transform: translate(-50%, 0) rotate(5deg);
92  }
93
94  50% {
95    transform-origin: 0 100%;
96    transform: translate(-50%, 0) rotate(1deg);
97  }
98
99  65% {
100    transform-origin: 0 100%;
101    transform: translate(-50%, 0) rotate(3deg);
102  }
103
104  100% {
105    transform-origin: 0 100%;
106    transform: translate(-50%, 0) rotate(0deg);
107  }
108}
109
110button:hover .icon-2 {
111  position: absolute;
112  top: -200%;
113  left: 90%;
114  transform: translate(-50%, 0);
115  width: 75px;
116  height: auto;
117  animation: inIcon2 1s ease .45s forwards;
118}
119
120@keyframes inIcon2 {
121  0% {
122    transform-origin: 0 100%;
123    transform: translate(-50%, 0) rotate(0deg);
124  }
125
126  35% {
127    transform-origin: 0 100%;
128    transform: translate(-50%, 0) rotate(10deg);
129  }
130
131  50% {
132    transform-origin: 0 100%;
133    transform: translate(-50%, 0) rotate(4deg);
134  }
135
136  80% {
137    transform-origin: 0 100%;
138    transform: translate(-50%, 0) rotate(5deg);
139  }
140
141  100% {
142    transform-origin: 0 100%;
143    transform: translate(-50%, 0) rotate(0deg);
144  }
145}
146
147button:hover .icon-3 {
148  position: absolute;
149  top: -130%;
150  left: 20%;
151  transform: translate(-50%, 0);
152  width: 60px;
153  height: auto;
154  animation: inIcon3 1s ease .45s forwards;
155}
156
157@keyframes inIcon3 {
158  0% {
159    transform-origin: 0 100%;
160    transform: translate(-50%, 0) rotate(0deg);
161  }
162
163  35% {
164    transform-origin: 0 100%;
165    transform: translate(-50%, 0) rotate(-2deg);
166  }
167
168  100% {
169    transform-origin: 0 100%;
170    transform: translate(-50%, 0) rotate(0deg);
171  }
172}
173
174button:hover .icon-4 {
175  position: absolute;
176  top: -300%;
177  left: 10%;
178  transform: translate(-50%, 0);
179  width: 85px;
180  height: auto;
181  animation: inIcon4 1s ease .45s forwards;
182}
183
184@keyframes inIcon4 {
185  0% {
186    transform-origin: 0 100%;
187    transform: translate(-50%, 0) rotate(0deg);
188  }
189
190  40% {
191    transform-origin: 0 100%;
192    transform: translate(-50%, 0) rotate(-3deg);
193  }
194
195  100% {
196    transform-origin: 0 100%;
197    transform: translate(-50%, 0) rotate(0deg);
198  }
199}
200
201button:hover .icon-5 {
202  position: absolute;
203  top: -350%;
204  left: 90%;
205  transform: translate(-50%, 0);
206  width: 85px;
207  height: auto;
208  animation: inIcon5 1s ease .45s forwards;
209}
210
211@keyframes inIcon5 {
212  0% {
213    transform-origin: 0 100%;
214    transform: translate(-50%, 0) rotate(0deg);
215  }
216
217  35% {
218    transform-origin: 0 100%;
219    transform: translate(-50%, 0) rotate(-3deg);
220  }
221
222  100% {
223    transform-origin: 0 100%;
224    transform: translate(-50%, 0) rotate(0deg);
225  }
226}
227
228.fil-leaf-1 {
229  fill: #7B9B3A
230}
231
232.fil-leaf-2 {
233  fill: #556729;
234  fill-rule: nonzero
235}
236
237.fil-leaf-3 {
238  fill: #556729
239}
240
241.fil-leaf-4 {
242  fill: #3C4819
243}
244
245.fil-leaf-5 {
246  fill: #3C4819
247}