Button by MuhammadHasann

Posted by

@MuhammadHasann

Theme:

Light

#icon#button#svg#plant

#e8e8e8

2.7K views

Add prefixes

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}

button {
  position: relative;
  padding: 13px 35px;
  background: #f5ddb7;
  font-size: 17px;
  font-weight: 900;
  color: #181818;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
  transition: all .3s ease-in-out;
}

.icon-1 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -1;
}

.icon-2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-3 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-4 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-5 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

button:hover {
  padding: 13px 25px;
  border-radius: 8px 8px 24px 24px;
}

button:hover .icon-1 {
  top: -250%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
  height: auto;
  animation: inIcon1 1s ease .45s forwards;
}

@keyframes inIcon1 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  25% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(1deg);
  }

  65% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-2 {
  position: absolute;
  top: -200%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 75px;
  height: auto;
  animation: inIcon2 1s ease .45s forwards;
}

@keyframes inIcon2 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(10deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(4deg);
  }

  80% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-3 {
  position: absolute;
  top: -130%;
  left: 20%;
  transform: translate(-50%, 0);
  width: 60px;
  height: auto;
  animation: inIcon3 1s ease .45s forwards;
}

@keyframes inIcon3 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-2deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-4 {
  position: absolute;
  top: -300%;
  left: 10%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon4 1s ease .45s forwards;
}

@keyframes inIcon4 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  40% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-5 {
  position: absolute;
  top: -350%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon5 1s ease .45s forwards;
}

@keyframes inIcon5 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.fil-leaf-1 {
  fill: #7B9B3A
}

.fil-leaf-2 {
  fill: #556729;
  fill-rule: nonzero
}

.fil-leaf-3 {
  fill: #556729
}

.fil-leaf-4 {
  fill: #3C4819
}

.fil-leaf-5 {
  fill: #3C4819
}

MuhammadHasann

Muhammad Hasan

MIT License

Copyright - 2023 MuhammadHasann (Muhammad Hasan) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.