Button by elijahgummer

This button was created for Button Mastery Vol. 2

#e8e8e8

1/* OUTER FRAME CONTAINER */
2.container {
3  padding-top: 80px;
4  display: flex;
5  justify-content: center;
6  align-items: center;
7  border: 1px solid #f8f8f8;
8  overflow: hidden;
9  padding: 2px;
10  border-radius: 14px;
11  box-shadow: 0 2px 4px rgba(28, 28, 28, 0.15),
12    /* Drop Shadow */ 0 30px 100px rgba(28, 28, 28, 0.13),
13    /* Drop Shadow */ 0 15px 30px rgba(28, 28, 28, 0.1),
14    /* Drop Shadow */ 0 6px 12px rgba(28, 28, 28, 0.05),
15    /* Drop Shadow */ inset 0 8px 24px rgba(255, 255, 255, 0.35),
16    /* Inner Shadow */ inset 0 -8px 24px rgba(255, 255, 255, 0.35); /* Inner Shadow */
17}
18.send-checkbox {
19  display: none;
20}
21/* --------------------- BUTTON STYLING -----------*/
22/* INNER FRAME 1 */
23.button {
24  display: flex;
25  align-items: center;
26  justify-content: center;
27  width: 170px;
28  height: 42.67px;
29  padding: 26px 20px;
30  border-radius: 12px;
31  font-family: "Roboto", sans-serif;
32  font-size: 14px;
33  font-weight: bold;
34  color: #1c1c1c;
35  cursor: pointer;
36  text-decoration: none;
37  transition: all 0.3s ease;
38  position: relative;
39  overflow: hidden;
40  z-index: 0;
41  background: linear-gradient(to top, silver, whitesmoke);
42  box-shadow: inset 0 8px 24px rgba(255, 255, 255, 0.35),
43    /* Inner Shadow */ 0 6px 16px rgba(28, 28, 28, 0.75),
44    /* Drop Shadow */ 0 2px 4px rgba(28, 28, 28, 0.15),
45    /* Drop Shadow */ 0 30px 100px rgba(28, 28, 28, 0.13),
46    /* Drop Shadow */ 0 15px 30px rgba(28, 28, 28, 0.1),
47    /* Drop Shadow */ 0 6px 12px rgba(28, 28, 28, 0.05); /* Drop Shadow */
48  background: linear-gradient(to top, silver, whitesmoke);
49  transition: all 0.3s ease;
50}
51.button:hover #dots {
52  display: block;
53}
54.button:hover {
55  box-shadow: inset 0 8px 24px rgba(255, 255, 255, 0.35),
56    0 6px 16px rgba(28, 28, 28, 0.95),
57    /* darker inner shadow */ 0 2px 4px rgba(28, 28, 28, 0.25),
58    /* darker drop shadow */ 0 30px 100px rgba(28, 28, 28, 0.2),
59    0 15px 30px rgba(28, 28, 28, 0.17),
60    /* darker drop shadow */ 0 6px 12px rgba(28, 28, 28, 0.12); /* darker drop shadow */
61  transform: translateY(-1px); /* Move up on hover */
62}
63.button:active {
64  transform: translateY(0.1px);
65}
66.button:active::before {
67  top: 2.8px;
68  left: 5px;
69  right: 5px;
70  bottom: 2.8px;
71  background: linear-gradient(
72    0deg,
73    whitesmoke,
74    silver 75%,
75    rgba(0, 0, 0, 0.5) 100%
76  );
77  box-shadow: 15px 15px 38px #979494, -15px -15px 38px #f0f0f0;
78}
79.button:active {
80  top: 0.2px;
81  left: 0.3px;
82  right: 0.2px;
83  bottom: 0.2px;
84}
85/* INNER FRAME 2 */
86.button::before {
87  content: "";
88  position: absolute;
89  top: 3px;
90  left: 3px;
91  right: 3px;
92  bottom: 3px;
93  border-radius: 28px;
94  background: linear-gradient(90deg, #ffffff 50%, #cacaca 100%);
95  background: -moz-linear-gradient(#f0eee9, #eceae8);
96  background: -ms-linear-gradient(#efeeeb, #e7e4e1);
97  background: -o-linear-gradient(#e1dfda, #d2cbc3);
98  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f3f2ef), to(#eceae7));
99  background: -webkit-linear-gradient(#dfdfdc, #fbb2b2);
100  background: linear-gradient(#e7e6e5, #e1e1de);
101  box-shadow: inset 0 -2px 5px rgba(255, 255, 255, 0.05),
102    /* Inner Shadow */ 0 2px 5px rgba(255, 255, 255, 0.1); /* Inner Shadow */
103  border: 1px solid #fafbfb;
104  box-shadow: 15px 15px 38px #979494, -15px -15px 38px #f0f0f0;
105  background: linear-gradient(silver, whitesmoke);
106  transition: all 0.3s ease;
107  z-index: -1;
108  opacity: 0.25;
109  padding: 20px 10px;
110}
111/* ICONS STYLING */
112.icon-send {
113  margin-right: 5px;
114  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadow */
115  width: 20px;
116  height: 20px;
117  transform: rotate(-55deg);
118  transition: transform 0.4s ease-in-out; /* Smooth transition */
119}
120
121.icon-send:hover {
122  animation: flying 0.6s ease-in-out infinite alternate;
123  transform: translateX(3px) translateY(-3px) rotate(2deg) scale(1.1);
124}
125
126/* When hovering over button or button-text, only the icon should animate */
127.icon-send:hover,
128.button-text:hover .icon-send {
129  animation: flying 0.6s ease-in-out infinite alternate;
130}
131.icon-send:hover,
132.button-text:hover .icon-send {
133  transform: translateX(3px) translateY(-3px) rotate(2deg) scale(1.1);
134}
135/* TEXT STYLING */
136.sending {
137  opacity: 0;
138  display: none;
139  transition: opacity 0.2s ease, transform 0.2s ease;
140  position: absolute;
141  top: -5%;
142  left: -10%;
143  transform: translate(-10%, 10%);
144}
145@keyframes changeText {
146  0% {
147    content: "Sending";
148  }
149  33% {
150    content: "Sending.";
151  }
152  66% {
153    content: "Sending..";
154  }
155  100% {
156    content: "Sending...";
157  }
158}
159
160/* Apply the animation to the sending text */
161.sending::after {
162  content: "Sending"; /* Initial text */
163  animation: changeText 1.5s 2; /* Animation properties */
164}
165.sent {
166  opacity: 0;
167  display: none;
168  transition: opacity 0.2s ease, transform 0.2s ease;
169  position: absolute;
170  top: 1%;
171  left: -45%;
172  transform: translate(-10%, -10%);
173}
174.button .button-text,
175.button .icon-send {
176  position: relative;
177  z-index: 1;
178  text-shadow: 0px 1px 1px rgba(28, 28, 28, 0.35); /* Text shadow */
179}
180.button.clicked .icon-send {
181  animation: rotateBack 0.4s ease forwards;
182}
183
184.button:active .icon-send {
185  transform: translateY(2px) translateX(-1px); /* Move up when pressed */
186}
187.button:not(:active) .icon-send {
188  transition: transform 0.4s ease-in-out; /* Smooth transition */
189}
190.icon-send {
191  margin-right: 8px;
192  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadow*/
193  width: 20px;
194  height: 20px;
195  transform: rotate(-55deg);
196  transition: transform 0.4s ease-in-out;
197}
198.icon-check {
199  margin-right: 10px;
200  opacity: 0;
201  position: absolute;
202  left: 55px;
203  transform: translateY(-80px);
204  transition: transform 0.2s ease, opacity 0.2s ease;
205  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadod*/
206  width: 20px;
207  height: 20px;
208}
209.send-checkbox:checked ~ .button .icon-send {
210  transform: scale(0.5) translateX(-200px);
211}
212.send-checkbox:checked ~ .button .button-text {
213  opacity: 0;
214}
215.send-checkbox:checked ~ .button .sending {
216  display: block;
217  opacity: 1;
218  animation: hideSending 0.5s ease forwards;
219  animation-delay: 2.6s;
220}
221.send-checkbox:checked ~ .button .sent {
222  display: block;
223  animation: showSent 0.2s ease forwards; /* Delay to start after showing */
224  animation-delay: 4s;
225}
226.send-checkbox:checked ~ .button .icon-check {
227  opacity: 1;
228  transform: translateY(0);
229  transition-delay: 4s;
230}
231.send-checkbox:checked ~ .button .icon-send {
232  animation: planeSlide 1s ease forwards 3.4s; /* Wait for other animations to complete */
233}
234
235/* ANIMATIONS */
236@keyframes planeSlide {
237  0% {
238    transform: translateX(-200px); /* Start from left */
239  }
240  100% {
241    transform: translateX(200px); /* Move to right */
242  }
243}
244@keyframes flying {
245  0% {
246    transform: translateY(3px);
247  }
248  100% {
249    transform: translateY(1px);
250  }
251}
252@keyframes showSent {
253  0% {
254    opacity: 0;
255    transform: translateY(-80px);
256  }
257  100% {
258    opacity: 1;
259    transform: translateY(0);
260  }
261}
262@keyframes slideRight {
263  0% {
264    transform: translateX(0);
265  }
266  100% {
267    transform: translateX(200px); /* Adjust as needed */
268  }
269}
270@keyframes hideSending {
271  0% {
272    opacity: 1;
273    transform: translateY(0);
274  }
275  100% {
276    opacity: 0;
277    transform: translateY(100px);
278  }
279}
280@keyframes rotateBack {
281  0% {
282    transform: rotate(-55deg);
283  }
284  100% {
285    transform: rotate(0deg); /* Rotate back to 0 degrees */
286  }
287}
288

/* OUTER FRAME CONTAINER */
.container {
  padding-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f8f8f8;
  overflow: hidden;
  padding: 2px;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(28, 28, 28, 0.15),
    /* Drop Shadow */ 0 30px 100px rgba(28, 28, 28, 0.13),
    /* Drop Shadow */ 0 15px 30px rgba(28, 28, 28, 0.1),
    /* Drop Shadow */ 0 6px 12px rgba(28, 28, 28, 0.05),
    /* Drop Shadow */ inset 0 8px 24px rgba(255, 255, 255, 0.35),
    /* Inner Shadow */ inset 0 -8px 24px rgba(255, 255, 255, 0.35); /* Inner Shadow */
}
.send-checkbox {
  display: none;
}
/* --------------------- BUTTON STYLING -----------*/
/* INNER FRAME 1 */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 42.67px;
  padding: 26px 20px;
  border-radius: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #1c1c1c;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(to top, silver, whitesmoke);
  box-shadow: inset 0 8px 24px rgba(255, 255, 255, 0.35),
    /* Inner Shadow */ 0 6px 16px rgba(28, 28, 28, 0.75),
    /* Drop Shadow */ 0 2px 4px rgba(28, 28, 28, 0.15),
    /* Drop Shadow */ 0 30px 100px rgba(28, 28, 28, 0.13),
    /* Drop Shadow */ 0 15px 30px rgba(28, 28, 28, 0.1),
    /* Drop Shadow */ 0 6px 12px rgba(28, 28, 28, 0.05); /* Drop Shadow */
  background: linear-gradient(to top, silver, whitesmoke);
  transition: all 0.3s ease;
}
.button:hover #dots {
  display: block;
}
.button:hover {
  box-shadow: inset 0 8px 24px rgba(255, 255, 255, 0.35),
    0 6px 16px rgba(28, 28, 28, 0.95),
    /* darker inner shadow */ 0 2px 4px rgba(28, 28, 28, 0.25),
    /* darker drop shadow */ 0 30px 100px rgba(28, 28, 28, 0.2),
    0 15px 30px rgba(28, 28, 28, 0.17),
    /* darker drop shadow */ 0 6px 12px rgba(28, 28, 28, 0.12); /* darker drop shadow */
  transform: translateY(-1px); /* Move up on hover */
}
.button:active {
  transform: translateY(0.1px);
}
.button:active::before {
  top: 2.8px;
  left: 5px;
  right: 5px;
  bottom: 2.8px;
  background: linear-gradient(
    0deg,
    whitesmoke,
    silver 75%,
    rgba(0, 0, 0, 0.5) 100%
  );
  box-shadow: 15px 15px 38px #979494, -15px -15px 38px #f0f0f0;
}
.button:active {
  top: 0.2px;
  left: 0.3px;
  right: 0.2px;
  bottom: 0.2px;
}
/* INNER FRAME 2 */
.button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 28px;
  background: linear-gradient(90deg, #ffffff 50%, #cacaca 100%);
  background: -moz-linear-gradient(#f0eee9, #eceae8);
  background: -ms-linear-gradient(#efeeeb, #e7e4e1);
  background: -o-linear-gradient(#e1dfda, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f3f2ef), to(#eceae7));
  background: -webkit-linear-gradient(#dfdfdc, #fbb2b2);
  background: linear-gradient(#e7e6e5, #e1e1de);
  box-shadow: inset 0 -2px 5px rgba(255, 255, 255, 0.05),
    /* Inner Shadow */ 0 2px 5px rgba(255, 255, 255, 0.1); /* Inner Shadow */
  border: 1px solid #fafbfb;
  box-shadow: 15px 15px 38px #979494, -15px -15px 38px #f0f0f0;
  background: linear-gradient(silver, whitesmoke);
  transition: all 0.3s ease;
  z-index: -1;
  opacity: 0.25;
  padding: 20px 10px;
}
/* ICONS STYLING */
.icon-send {
  margin-right: 5px;
  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadow */
  width: 20px;
  height: 20px;
  transform: rotate(-55deg);
  transition: transform 0.4s ease-in-out; /* Smooth transition */
}

.icon-send:hover {
  animation: flying 0.6s ease-in-out infinite alternate;
  transform: translateX(3px) translateY(-3px) rotate(2deg) scale(1.1);
}

/* When hovering over button or button-text, only the icon should animate */
.icon-send:hover,
.button-text:hover .icon-send {
  animation: flying 0.6s ease-in-out infinite alternate;
}
.icon-send:hover,
.button-text:hover .icon-send {
  transform: translateX(3px) translateY(-3px) rotate(2deg) scale(1.1);
}
/* TEXT STYLING */
.sending {
  opacity: 0;
  display: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  top: -5%;
  left: -10%;
  transform: translate(-10%, 10%);
}
@keyframes changeText {
  0% {
    content: "Sending";
  }
  33% {
    content: "Sending.";
  }
  66% {
    content: "Sending..";
  }
  100% {
    content: "Sending...";
  }
}

/* Apply the animation to the sending text */
.sending::after {
  content: "Sending"; /* Initial text */
  animation: changeText 1.5s 2; /* Animation properties */
}
.sent {
  opacity: 0;
  display: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  top: 1%;
  left: -45%;
  transform: translate(-10%, -10%);
}
.button .button-text,
.button .icon-send {
  position: relative;
  z-index: 1;
  text-shadow: 0px 1px 1px rgba(28, 28, 28, 0.35); /* Text shadow */
}
.button.clicked .icon-send {
  animation: rotateBack 0.4s ease forwards;
}

.button:active .icon-send {
  transform: translateY(2px) translateX(-1px); /* Move up when pressed */
}
.button:not(:active) .icon-send {
  transition: transform 0.4s ease-in-out; /* Smooth transition */
}
.icon-send {
  margin-right: 8px;
  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadow*/
  width: 20px;
  height: 20px;
  transform: rotate(-55deg);
  transition: transform 0.4s ease-in-out;
}
.icon-check {
  margin-right: 10px;
  opacity: 0;
  position: absolute;
  left: 55px;
  transform: translateY(-80px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  filter: drop-shadow(0px 1px 1px rgba(28, 28, 28, 0.35)); /* Icon shadod*/
  width: 20px;
  height: 20px;
}
.send-checkbox:checked ~ .button .icon-send {
  transform: scale(0.5) translateX(-200px);
}
.send-checkbox:checked ~ .button .button-text {
  opacity: 0;
}
.send-checkbox:checked ~ .button .sending {
  display: block;
  opacity: 1;
  animation: hideSending 0.5s ease forwards;
  animation-delay: 2.6s;
}
.send-checkbox:checked ~ .button .sent {
  display: block;
  animation: showSent 0.2s ease forwards; /* Delay to start after showing */
  animation-delay: 4s;
}
.send-checkbox:checked ~ .button .icon-check {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 4s;
}
.send-checkbox:checked ~ .button .icon-send {
  animation: planeSlide 1s ease forwards 3.4s; /* Wait for other animations to complete */
}

/* ANIMATIONS */
@keyframes planeSlide {
  0% {
    transform: translateX(-200px); /* Start from left */
  }
  100% {
    transform: translateX(200px); /* Move to right */
  }
}
@keyframes flying {
  0% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(1px);
  }
}
@keyframes showSent {
  0% {
    opacity: 0;
    transform: translateY(-80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px); /* Adjust as needed */
  }
}
@keyframes hideSending {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}
@keyframes rotateBack {
  0% {
    transform: rotate(-55deg);
  }
  100% {
    transform: rotate(0deg); /* Rotate back to 0 degrees */
  }
}

Toggle prefixes

60 views

Copy to Figma

60 views

Original Creator: Shubhajit

This UI element is reposted from an external origin. Show them some appreciation!

Visit source website

Comments

bogus19738 22. June at 5:15

22. June at 5:15

I like it when you click it

No variations yet

MIT License

Copyright - 2024 Shubhajit - https://x.com/smuiux/status/1791843469855453448 

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.