Button by LuisEgan

This button was created for CSS Space Challenge

Posted by

@LuisEgan

Theme:

Dark

#button

#212121

265 views

Add prefixes

1button {
2  background-color: transparent;
3  position: relative;
4  border: none;
5}
6
7button::before {
8  content: "Ready";
9  animation: .55s cubic-bezier(1,-0.06,.61,.45);
10  color: rgb(87, 78, 78);
11  font-size: 1.3em;
12  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
13  position: absolute;
14  top: 0;
15  bottom: 0;
16  left: 0;
17  right: 0;
18  transform: translateY(43%);
19  z-index: 1;
20}
21
22/* COLORS */
23
24#tip > path {
25  fill: #5b5eb3;
26}
27
28#rocket-body > path {
29  fill: #cccac6;
30  stroke: #cccac6
31}
32
33#wings > path {
34  fill: #cccac6;
35  stroke: #cccac6
36}
37
38#rocket-body-bottom > path,
39#rocket-body-bottom > polygon {
40  fill: #514737;
41  stroke: #514737;
42}
43
44#flames :nth-child(2n+1) {
45  fill: red;
46}
47
48#flames :nth-child(2n) {
49  fill: yellow;
50}
51
52/* SMOKE */
53
54#smoke > span {
55  position: absolute;
56  left: 0;
57  height: 16px;
58  width: 16px;
59  border-radius: 100%;
60  background-color: gray;
61  top: 50%;
62  z-index: -1;
63  animation: .5s linear infinite;
64  display: none;
65}
66
67#smoke :nth-child(1) {
68  top: 40%;
69  animation-name: smoke-1;
70  animation-delay: 3ms;
71  animation-duration: 1s;
72}
73
74#smoke :nth-child(2) {
75  top: 45%;
76  animation-name: smoke-2;
77  animation-duration: 1.3s;
78}
79
80#smoke :nth-child(3) {
81  top: 42%;
82  animation-name: smoke-3;
83  animation-delay: 3ms;
84  animation-duration: 1.6s;
85}
86
87#smoke :nth-child(4) {
88  top: 43%;
89  animation-name: smoke-1;
90  animation-duration: .7s;
91}
92
93#smoke :nth-child(5) {
94  top: 46%;
95  animation-name: smoke-2;
96  animation-delay: 3ms;
97  animation-duration: 1s;
98}
99
100#smoke :nth-child(6) {
101  top: 48%;
102  animation-name: smoke-3;
103  animation-duration: 1.2s;
104}
105
106/* SET ANIMATIONS */
107
108#rocket {
109  animation: .55s cubic-bezier(1,-0.06,.61,.45);
110  height: 150px;
111  transform: translateX(-20px) rotateZ(45deg);
112}
113
114svg #flames > path {
115  animation: 1.2s linear infinite forwards;
116  transform-origin: center center;
117  animation-play-state: paused;
118  opacity: 0;
119}
120
121svg #wings-top {
122  animation: .6s linear forwards;
123  animation-name: close-wing-top;
124}
125
126svg #wings-bottom {
127  animation: .6s linear forwards;
128  animation-name: close-wing-bottom;
129}
130
131/* HOVER */
132
133button:hover::before {
134  content: "Set";
135}
136
137button:hover #wings-top,
138button:focus #wings-top {
139  animation-name: open-wing-top;
140}
141
142button:hover #wings-bottom,
143button:focus #wings-bottom {
144  animation-name: open-wing-bottom;
145}
146
147button:hover #smoke > span {
148  display: block;
149}
150
151/* FOCUS */
152
153button:focus::before {
154  content: "Go!";
155  animation-name: launch-text;
156}
157
158button:focus #rocket {
159  animation-name: launch_149;
160}
161
162button:focus #flames > path {
163  animation-name: flames;
164  animation-play-state: running;
165}
166
167button:focus #smoke > span {
168  display: none;
169}
170
171/* ANIMATIONS KEYFRAMES */
172
173@keyframes launch_149 {
174  from {
175    transform: translateX(-20px) rotateZ(45deg);
176  }
177
178  to {
179    transform: translateX(2000px) rotateZ(45deg);
180  }
181}
182
183@keyframes launch-text {
184  from {
185    transform: translateY(43%);
186  }
187
188  to {
189    transform: translateY(43%) translateX(2000px);
190  }
191}
192
193@keyframes open-wing-top {
194  from {
195    transform: translateY(-100px);
196  }
197
198  to {
199    transform: translateY(0px);
200  }
201}
202
203@keyframes open-wing-bottom {
204  from {
205    transform: translateX(100px);
206  }
207
208  to {
209    transform: translateX(0px);
210  }
211}
212
213@keyframes close-wing-top {
214  from {
215    transform: translateY(0px);
216  }
217
218  to {
219    transform: translateY(-100px);
220  }
221}
222
223@keyframes close-wing-bottom {
224  from {
225    transform: translateX(0px);
226  }
227
228  to {
229    transform: translateX(100px);
230  }
231}
232
233@keyframes flames {
234  0% {
235    transform: scale(1);
236    opacity: 1;
237  }
238
239  30% {
240    transform: scale(.89);
241  }
242
243  50% {
244    transform: scale(.95);
245  }
246
247  70% {
248    transform: scale(.9);
249  }
250
251  100% {
252    transform: scale(1);
253    opacity: 1;
254  }
255}
256
257@keyframes smoke-1 {
258  0% {
259    opacity: .3;
260    transform: translate(0, 0);
261  }
262
263  60% {
264    opacity: .3;
265    transform: translate(-15px, -10px);
266  }
267
268  100% {
269    opacity: .1;
270    transform: translate(-25px, 5px);
271  }
272}
273
274@keyframes smoke-2 {
275  0% {
276    opacity: .3;
277    transform: translate(0, 0);
278  }
279
280  60% {
281    opacity: .3;
282    transform: translate(-10px, -3px);
283  }
284
285  100% {
286    opacity: .1;
287    transform: translate(-30px, 9px);
288  }
289}
290
291@keyframes smoke-3 {
292  0% {
293    opacity: .3;
294    transform: translate(0, 0);
295  }
296
297  60% {
298    opacity: .3;
299    transform: translate(-5px, 5px);
300  }
301
302  100% {
303    opacity: .1;
304    transform: translate(-20px, -5px);
305  }
306}

button {
  background-color: transparent;
  position: relative;
  border: none;
}

button::before {
  content: "Ready";
  animation: .55s cubic-bezier(1,-0.06,.61,.45);
  color: rgb(87, 78, 78);
  font-size: 1.3em;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(43%);
  z-index: 1;
}

/* COLORS */

#tip > path {
  fill: #5b5eb3;
}

#rocket-body > path {
  fill: #cccac6;
  stroke: #cccac6
}

#wings > path {
  fill: #cccac6;
  stroke: #cccac6
}

#rocket-body-bottom > path,
#rocket-body-bottom > polygon {
  fill: #514737;
  stroke: #514737;
}

#flames :nth-child(2n+1) {
  fill: red;
}

#flames :nth-child(2n) {
  fill: yellow;
}

/* SMOKE */

#smoke > span {
  position: absolute;
  left: 0;
  height: 16px;
  width: 16px;
  border-radius: 100%;
  background-color: gray;
  top: 50%;
  z-index: -1;
  animation: .5s linear infinite;
  display: none;
}

#smoke :nth-child(1) {
  top: 40%;
  animation-name: smoke-1;
  animation-delay: 3ms;
  animation-duration: 1s;
}

#smoke :nth-child(2) {
  top: 45%;
  animation-name: smoke-2;
  animation-duration: 1.3s;
}

#smoke :nth-child(3) {
  top: 42%;
  animation-name: smoke-3;
  animation-delay: 3ms;
  animation-duration: 1.6s;
}

#smoke :nth-child(4) {
  top: 43%;
  animation-name: smoke-1;
  animation-duration: .7s;
}

#smoke :nth-child(5) {
  top: 46%;
  animation-name: smoke-2;
  animation-delay: 3ms;
  animation-duration: 1s;
}

#smoke :nth-child(6) {
  top: 48%;
  animation-name: smoke-3;
  animation-duration: 1.2s;
}

/* SET ANIMATIONS */

#rocket {
  animation: .55s cubic-bezier(1,-0.06,.61,.45);
  height: 150px;
  transform: translateX(-20px) rotateZ(45deg);
}

svg #flames > path {
  animation: 1.2s linear infinite forwards;
  transform-origin: center center;
  animation-play-state: paused;
  opacity: 0;
}

svg #wings-top {
  animation: .6s linear forwards;
  animation-name: close-wing-top;
}

svg #wings-bottom {
  animation: .6s linear forwards;
  animation-name: close-wing-bottom;
}

/* HOVER */

button:hover::before {
  content: "Set";
}

button:hover #wings-top,
button:focus #wings-top {
  animation-name: open-wing-top;
}

button:hover #wings-bottom,
button:focus #wings-bottom {
  animation-name: open-wing-bottom;
}

button:hover #smoke > span {
  display: block;
}

/* FOCUS */

button:focus::before {
  content: "Go!";
  animation-name: launch-text;
}

button:focus #rocket {
  animation-name: launch_149;
}

button:focus #flames > path {
  animation-name: flames;
  animation-play-state: running;
}

button:focus #smoke > span {
  display: none;
}

/* ANIMATIONS KEYFRAMES */

@keyframes launch_149 {
  from {
    transform: translateX(-20px) rotateZ(45deg);
  }

  to {
    transform: translateX(2000px) rotateZ(45deg);
  }
}

@keyframes launch-text {
  from {
    transform: translateY(43%);
  }

  to {
    transform: translateY(43%) translateX(2000px);
  }
}

@keyframes open-wing-top {
  from {
    transform: translateY(-100px);
  }

  to {
    transform: translateY(0px);
  }
}

@keyframes open-wing-bottom {
  from {
    transform: translateX(100px);
  }

  to {
    transform: translateX(0px);
  }
}

@keyframes close-wing-top {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-100px);
  }
}

@keyframes close-wing-bottom {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(100px);
  }
}

@keyframes flames {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  30% {
    transform: scale(.89);
  }

  50% {
    transform: scale(.95);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes smoke-1 {
  0% {
    opacity: .3;
    transform: translate(0, 0);
  }

  60% {
    opacity: .3;
    transform: translate(-15px, -10px);
  }

  100% {
    opacity: .1;
    transform: translate(-25px, 5px);
  }
}

@keyframes smoke-2 {
  0% {
    opacity: .3;
    transform: translate(0, 0);
  }

  60% {
    opacity: .3;
    transform: translate(-10px, -3px);
  }

  100% {
    opacity: .1;
    transform: translate(-30px, 9px);
  }
}

@keyframes smoke-3 {
  0% {
    opacity: .3;
    transform: translate(0, 0);
  }

  60% {
    opacity: .3;
    transform: translate(-5px, 5px);
  }

  100% {
    opacity: .1;
    transform: translate(-20px, -5px);
  }
}

LuisEgan

Luis Egan

Mainly MERN-Stack Web Developer.

MIT License

Copyright - 2023 LuisEgan (Luis Egan) 

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.