Button by LuisEgan

This button was created for css-challenge-1

Made by

@LuisEgan

Theme:

Dark

#button

#212121

172 views

CSSAdd 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);
  }
}

HTML

1<button>
2  <svg id="rocket" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 416.449 416.449" xml:space="preserve">
3    <g id="tip">
4      <path d="M399.76,16.699c10.12,37.84,8.67,78.13-4.34,115.28h-0.01L284.48,21.049v-0.01      C321.63,8.029,361.92,6.579,399.76,16.699z"></path>
5    </g>
6    <g id="rocket-body">
7      <path d="M90.21,207.929l87.14-101.42h0.01l33.71-39.24c21.43-21.43,46.6-36.84,73.41-46.23v0.01      l110.93,110.93h0.01c-9.39,26.81-24.8,51.98-46.23,73.41l-39.24,33.71l-101.43,87.14l-29.57-29.57l-29.58-29.58l-29.58-29.58z"></path>
8    </g>
9    <g id="wings">
10      <path id="wings-top" d="M309.95,239.099c1.74,45.6-14.8,91.78-49.61,126.59c-10.69,10.68-22.44,19.65-34.93,26.89      l-16.89-66.34L309.95,239.099z"></path>
11      <path id="wings-bottom" d="M177.35,106.509l-87.14,101.42l-66.33-16.88c7.24-12.49,16.21-24.24,26.89-34.93      C85.58,121.309,131.74,104.769,177.35,106.509z"></path>
12    </g>
13    <g id="rocket-body-bottom">
14      <path d="M208.52,326.239l-39.94,14.71c-10.98,4.05-23.31,1.34-31.58-6.94l-6.85-6.85l48.8-30.49      L208.52,326.239z"></path>
15      <polygon points="178.95,296.669 130.15,327.159 130.14,327.159 109.72,306.739 149.37,267.089"></polygon>
16      <polygon points="149.37,267.089 109.72,306.739 89.3,286.309 119.79,237.509"></polygon>
17      <path d="M119.79,237.509l-30.49,48.8l-6.86-6.85c-8.27-8.28-10.98-20.6-6.94-31.58l14.71-39.95      L119.79,237.509z"></path>
18    </g>
19    <g id="flames">
20      <path d="M28.88,339.459c-2.559,0-5.119-0.977-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.143      l20.54-20.54c3.905-3.904,10.237-3.904,14.143,0c3.905,3.905,3.905,10.237,0,14.143l-20.54,20.54      C33.999,338.482,31.44,339.459,28.88,339.459z"></path>
21      <path d="M10,416.439c-2.56,0-5.119-0.977-7.072-2.93c-3.905-3.905-3.904-10.237,0.001-14.142l68.47-68.46      c3.905-3.904,10.237-3.904,14.142,0.001c3.905,3.905,3.904,10.237-0.002,14.142l-68.47,68.46      C15.118,415.463,12.559,416.439,10,416.439z"></path>
22      <path d="M73.29,411.259c-2.56,0-5.118-0.977-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.143      l34.23-34.229c3.905-3.904,10.237-3.903,14.142,0c3.905,3.905,3.905,10.237,0,14.143l-34.23,34.229      C78.409,410.282,75.849,411.259,73.29,411.259z"></path>
23    </g>
24  </svg>
25
26  <div id="smoke">
27    <span></span>
28    <span></span>
29    <span></span>
30    <span></span>
31    <span></span>
32    <span></span>
33  </div>
34</button>

<button>
  <svg id="rocket" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 416.449 416.449" xml:space="preserve">
    <g id="tip">
      <path d="M399.76,16.699c10.12,37.84,8.67,78.13-4.34,115.28h-0.01L284.48,21.049v-0.01      C321.63,8.029,361.92,6.579,399.76,16.699z"></path>
    </g>
    <g id="rocket-body">
      <path d="M90.21,207.929l87.14-101.42h0.01l33.71-39.24c21.43-21.43,46.6-36.84,73.41-46.23v0.01      l110.93,110.93h0.01c-9.39,26.81-24.8,51.98-46.23,73.41l-39.24,33.71l-101.43,87.14l-29.57-29.57l-29.58-29.58l-29.58-29.58z"></path>
    </g>
    <g id="wings">
      <path id="wings-top" d="M309.95,239.099c1.74,45.6-14.8,91.78-49.61,126.59c-10.69,10.68-22.44,19.65-34.93,26.89      l-16.89-66.34L309.95,239.099z"></path>
      <path id="wings-bottom" d="M177.35,106.509l-87.14,101.42l-66.33-16.88c7.24-12.49,16.21-24.24,26.89-34.93      C85.58,121.309,131.74,104.769,177.35,106.509z"></path>
    </g>
    <g id="rocket-body-bottom">
      <path d="M208.52,326.239l-39.94,14.71c-10.98,4.05-23.31,1.34-31.58-6.94l-6.85-6.85l48.8-30.49      L208.52,326.239z"></path>
      <polygon points="178.95,296.669 130.15,327.159 130.14,327.159 109.72,306.739 149.37,267.089"></polygon>
      <polygon points="149.37,267.089 109.72,306.739 89.3,286.309 119.79,237.509"></polygon>
      <path d="M119.79,237.509l-30.49,48.8l-6.86-6.85c-8.27-8.28-10.98-20.6-6.94-31.58l14.71-39.95      L119.79,237.509z"></path>
    </g>
    <g id="flames">
      <path d="M28.88,339.459c-2.559,0-5.119-0.977-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.143      l20.54-20.54c3.905-3.904,10.237-3.904,14.143,0c3.905,3.905,3.905,10.237,0,14.143l-20.54,20.54      C33.999,338.482,31.44,339.459,28.88,339.459z"></path>
      <path d="M10,416.439c-2.56,0-5.119-0.977-7.072-2.93c-3.905-3.905-3.904-10.237,0.001-14.142l68.47-68.46      c3.905-3.904,10.237-3.904,14.142,0.001c3.905,3.905,3.904,10.237-0.002,14.142l-68.47,68.46      C15.118,415.463,12.559,416.439,10,416.439z"></path>
      <path d="M73.29,411.259c-2.56,0-5.118-0.977-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.143      l34.23-34.229c3.905-3.904,10.237-3.903,14.142,0c3.905,3.905,3.905,10.237,0,14.143l-34.23,34.229      C78.409,410.282,75.849,411.259,73.29,411.259z"></path>
    </g>
  </svg>

  <div id="smoke">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>