Button by marcelodolza

This button was created for Button Mastery Vol. 2

#e8e8e8

1.button {
2  --primary: #ff5569;
3  --neutral-1: #f7f8f7;
4  --neutral-2: #e7e7e7;
5  --radius: 14px;
6
7  cursor: pointer;
8  border-radius: var(--radius);
9  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
10  border: none;
11  box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
12    0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);
13  display: flex;
14  align-items: center;
15  justify-content: center;
16  position: relative;
17  transition: all 0.3s ease;
18  min-width: 200px;
19  padding: 20px;
20  height: 68px;
21  font-family: "Galano Grotesque", Poppins, Montserrat, sans-serif;
22  font-style: normal;
23  font-size: 18px;
24  font-weight: 600;
25}
26.button:hover {
27  transform: scale(1.02);
28  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
29    0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 3px -3px rgba(0, 0, 0, 0.04);
30}
31.button:active {
32  transform: scale(1);
33  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
34    0 10px 3px -3px rgba(0, 0, 0, 0.2);
35}
36.button:after {
37  content: "";
38  position: absolute;
39  inset: 0;
40  border-radius: var(--radius);
41  border: 2.5px solid transparent;
42  background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
43    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45))
44      border-box;
45  z-index: 0;
46  transition: all 0.4s ease;
47}
48.button:hover::after {
49  transform: scale(1.05, 1.1);
50  box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
51}
52.button::before {
53  content: "";
54  inset: 7px 6px 6px 6px;
55  position: absolute;
56  background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
57  border-radius: 30px;
58  filter: blur(0.5px);
59  z-index: 2;
60}
61.state p {
62  display: flex;
63  align-items: center;
64  justify-content: center;
65}
66.state .icon {
67  position: absolute;
68  left: 0;
69  top: 0;
70  bottom: 0;
71  margin: auto;
72  transform: scale(1.25);
73  transition: all 0.3s ease;
74  display: flex;
75  align-items: center;
76  justify-content: center;
77}
78.state .icon svg {
79  overflow: visible;
80}
81
82/* Outline */
83.outline {
84  position: absolute;
85  border-radius: inherit;
86  overflow: hidden;
87  z-index: 1;
88  opacity: 0;
89  transition: opacity 0.4s ease;
90  inset: -2px -3.5px;
91}
92.outline::before {
93  content: "";
94  position: absolute;
95  inset: -100%;
96  background: conic-gradient(
97    from 180deg,
98    transparent 60%,
99    white 80%,
100    transparent 100%
101  );
102  animation: spin 2s linear infinite;
103  animation-play-state: paused;
104}
105@keyframes spin {
106  0% {
107    transform: rotate(0deg);
108  }
109  100% {
110    transform: rotate(360deg);
111  }
112}
113.button:hover .outline {
114  opacity: 1;
115}
116.button:hover .outline::before {
117  animation-play-state: running;
118}
119
120/* Letters */
121.state p span {
122  display: block;
123  opacity: 0;
124  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
125}
126.button:hover p span {
127  opacity: 1;
128  animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
129}
130.button:focus p span {
131  opacity: 1;
132  animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
133}
134@keyframes wave {
135  30% {
136    opacity: 1;
137    transform: translateY(4px) translateX(0) rotate(0);
138  }
139  50% {
140    opacity: 1;
141    transform: translateY(-3px) translateX(0) rotate(0);
142    color: var(--primary);
143  }
144  100% {
145    opacity: 1;
146    transform: translateY(0) translateX(0) rotate(0);
147  }
148}
149@keyframes slideDown {
150  0% {
151    opacity: 0;
152    transform: translateY(-20px) translateX(5px) rotate(-90deg);
153    color: var(--primary);
154    filter: blur(5px);
155  }
156  30% {
157    opacity: 1;
158    transform: translateY(4px) translateX(0) rotate(0);
159    filter: blur(0);
160  }
161  50% {
162    opacity: 1;
163    transform: translateY(-3px) translateX(0) rotate(0);
164  }
165  100% {
166    opacity: 1;
167    transform: translateY(0) translateX(0) rotate(0);
168  }
169}
170@keyframes disapear {
171  from {
172    opacity: 1;
173  }
174  to {
175    opacity: 0;
176    transform: translateX(5px) translateY(20px);
177    color: var(--primary);
178    filter: blur(5px);
179  }
180}
181
182/* Plane */
183.state--default .icon svg {
184  animation: land 0.6s ease forwards;
185}
186.button:hover .state--default .icon {
187  transform: rotate(45deg) scale(1.25);
188}
189.button:focus .state--default svg {
190  animation: takeOff 0.8s linear forwards;
191}
192.button:focus .state--default .icon {
193  transform: rotate(0) scale(1.25);
194}
195@keyframes takeOff {
196  0% {
197    opacity: 1;
198  }
199  60% {
200    opacity: 1;
201    transform: translateX(70px) rotate(45deg) scale(2);
202  }
203  100% {
204    opacity: 0;
205    transform: translateX(160px) rotate(45deg) scale(0);
206  }
207}
208@keyframes land {
209  0% {
210    transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
211    opacity: 0;
212    filter: blur(3px);
213  }
214  100% {
215    transform: translateX(0) translateY(0) rotate(0);
216    opacity: 1;
217    filter: blur(0);
218  }
219}
220
221/* Contrail */
222.state--default .icon:before {
223  content: "";
224  position: absolute;
225  top: 50%;
226  height: 2px;
227  width: 0;
228  left: -5px;
229  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
230}
231.button:focus .state--default .icon:before {
232  animation: contrail 0.8s linear forwards;
233}
234@keyframes contrail {
235  0% {
236    width: 0;
237    opacity: 1;
238  }
239  8% {
240    width: 15px;
241  }
242  60% {
243    opacity: 0.7;
244    width: 80px;
245  }
246  100% {
247    opacity: 0;
248    width: 160px;
249  }
250}
251
252/* States */
253.state {
254  padding-left: 29px;
255  z-index: 2;
256  display: flex;
257  position: relative;
258}
259.state--default span:nth-child(4) {
260  margin-right: 5px;
261}
262.state--sent {
263  display: none;
264}
265.state--sent svg {
266  transform: scale(1.25);
267  margin-right: 8px;
268}
269.button:focus .state--default {
270  position: absolute;
271}
272.button:focus .state--sent {
273  display: flex;
274}
275.button:focus .state--sent span {
276  opacity: 0;
277  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
278}
279.button:focus .state--sent .icon svg {
280  opacity: 0;
281  animation: appear 1.2s ease forwards 0.8s;
282}
283@keyframes appear {
284  0% {
285    opacity: 0;
286    transform: scale(4) rotate(-40deg);
287    color: var(--primary);
288    filter: blur(4px);
289  }
290  30% {
291    opacity: 1;
292    transform: scale(0.6);
293    filter: blur(1px);
294  }
295  50% {
296    opacity: 1;
297    transform: scale(1.2);
298    filter: blur(0);
299  }
300  100% {
301    opacity: 1;
302    transform: scale(1);
303  }
304}
305

.button {
  --primary: #ff5569;
  --neutral-1: #f7f8f7;
  --neutral-2: #e7e7e7;
  --radius: 14px;

  cursor: pointer;
  border-radius: var(--radius);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  min-width: 200px;
  padding: 20px;
  height: 68px;
  font-family: "Galano Grotesque", Poppins, Montserrat, sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
}
.button:hover {
  transform: scale(1.02);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 3px -3px rgba(0, 0, 0, 0.04);
}
.button:active {
  transform: scale(1);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 10px 3px -3px rgba(0, 0, 0, 0.2);
}
.button:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45))
      border-box;
  z-index: 0;
  transition: all 0.4s ease;
}
.button:hover::after {
  transform: scale(1.05, 1.1);
  box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}
.button::before {
  content: "";
  inset: 7px 6px 6px 6px;
  position: absolute;
  background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
  border-radius: 30px;
  filter: blur(0.5px);
  z-index: 2;
}
.state p {
  display: flex;
  align-items: center;
  justify-content: center;
}
.state .icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.state .icon svg {
  overflow: visible;
}

/* Outline */
.outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
}
.outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 180deg,
    transparent 60%,
    white 80%,
    transparent 100%
  );
  animation: spin 2s linear infinite;
  animation-play-state: paused;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button:hover .outline {
  opacity: 1;
}
.button:hover .outline::before {
  animation-play-state: running;
}

/* Letters */
.state p span {
  display: block;
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.button:hover p span {
  opacity: 1;
  animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
.button:focus p span {
  opacity: 1;
  animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
}
@keyframes wave {
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
    color: var(--primary);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) translateX(5px) rotate(-90deg);
    color: var(--primary);
    filter: blur(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes disapear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(5px) translateY(20px);
    color: var(--primary);
    filter: blur(5px);
  }
}

/* Plane */
.state--default .icon svg {
  animation: land 0.6s ease forwards;
}
.button:hover .state--default .icon {
  transform: rotate(45deg) scale(1.25);
}
.button:focus .state--default svg {
  animation: takeOff 0.8s linear forwards;
}
.button:focus .state--default .icon {
  transform: rotate(0) scale(1.25);
}
@keyframes takeOff {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translateX(70px) rotate(45deg) scale(2);
  }
  100% {
    opacity: 0;
    transform: translateX(160px) rotate(45deg) scale(0);
  }
}
@keyframes land {
  0% {
    transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Contrail */
.state--default .icon:before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  left: -5px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}
.button:focus .state--default .icon:before {
  animation: contrail 0.8s linear forwards;
}
@keyframes contrail {
  0% {
    width: 0;
    opacity: 1;
  }
  8% {
    width: 15px;
  }
  60% {
    opacity: 0.7;
    width: 80px;
  }
  100% {
    opacity: 0;
    width: 160px;
  }
}

/* States */
.state {
  padding-left: 29px;
  z-index: 2;
  display: flex;
  position: relative;
}
.state--default span:nth-child(4) {
  margin-right: 5px;
}
.state--sent {
  display: none;
}
.state--sent svg {
  transform: scale(1.25);
  margin-right: 8px;
}
.button:focus .state--default {
  position: absolute;
}
.button:focus .state--sent {
  display: flex;
}
.button:focus .state--sent span {
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.button:focus .state--sent .icon svg {
  opacity: 0;
  animation: appear 1.2s ease forwards 0.8s;
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(4) rotate(-40deg);
    color: var(--primary);
    filter: blur(4px);
  }
  30% {
    opacity: 1;
    transform: scale(0.6);
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Toggle prefixes

479 views

Copy to Figma

479 views

Comments

mahiatlinux 18. June at 6:25

18. June at 6:25

Crazy good 🔥🔥 🔥 🔥 .

elijahgummer 17. June at 0:26

17. June at 0:26

love the animations 🔥

Uncannypotato69 17. June at 4:58

17. June at 4:58

@elijahgummer yea the tiny blur effect is what makes the effect perfect

No variations yet

MIT License

Copyright - 2024 marcelodolza (Marcelo Dolza) 

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.