Button by kennyotsu

This button was created for CSS Space Challenge

Posted by

@kennyotsu

Theme:

Dark

#complex#3d#action#button#spaceship

#212121

2.6K views

Add prefixes

1/* overengeneered pure css action button */
2/* UIVERSE CSS Challenge entry */
3/* by kennyotsu <3 */
4
5/* container wraps everything together, applies general styles and does nothing else*/
6.container {
7  position: relative;
8  display: -webkit-box;
9  display: -ms-flexbox;
10  display: flex;
11  -webkit-box-orient: vertical;
12  -webkit-box-direction: normal;
13  -ms-flex-direction: column;
14  flex-direction: column;
15  -webkit-box-pack: center;
16  -ms-flex-pack: center;
17  justify-content: center;
18  -webkit-box-align: center;
19  -ms-flex-align: center;
20  align-items: center;
21  width: 200px;
22  height: 200px;
23  color: rgb(131, 131, 131);
24  -webkit-transition: 400ms ease-in-out;
25  transition: 400ms ease-in-out;
26  transform: translateY(20px);
27}
28  
29  /* clickHandler, as the name suggests, handles clicks. 
30	 Its a label for invisible checkbox, positioned absolutely and taking whole container space.
31	 Comes with insane z-index. Stays above .container
32	 When clicked, will change input state to checked */
33#shuttle-wrapper {
34  position: absolute;
35  opacity: 0;
36  -webkit-transition: 200ms ease-in;
37  transition: 200ms ease-in;
38  z-index: 200;
39}
40
41#b {
42  width: 80px;
43  height: auto;
44  z-index: 200;
45}
46
47#shadow {
48  position: absolute;
49  width: 100px;
50  height: 80px;
51  -webkit-transform: rotateX(45deg) rotateZ(45deg);
52  transform: rotateX(45deg) rotateZ(45deg);
53  bottom: -10px;
54  z-index: -1;
55  background: radial-gradient(rgba(0, 0, 0, 0.382) 0%, rgba(0, 0, 0, 0) 70%);
56}
57
58#clickHandler {
59  display: block;
60  position: absolute;
61  inset: 0;
62  z-index: 999;
63}
64
65#clickHandler:hover {
66  cursor: pointer;
67}
68
69.container:hover #shuttle-wrapper {
70  opacity: 1;
71  -webkit-transform: translateY(-100px) translateZ(140px);
72  -ms-transform: translateY(-100px) translateZ(140px);
73  transform: translateY(-100px) translateZ(140px);
74  -webkit-transition: 400ms ease-in-out;
75  transition: 400ms ease-in-out;
76}
77
78#checkbox {
79	/* comment out to actually see the checkbox state */
80  display: none;
81	/*  */
82  position: absolute;
83  bottom: 0px;
84  width: 200px;
85}
86  
87  /* this pseudo-selectors will fire animations when 
88	 clickHandler changes checkbox state to checked */
89#checkbox:checked ~ #shuttle-wrapper #b {
90  -webkit-animation-name: launch_31;
91  animation-name: launch_31;
92  -webkit-animation-timing-function: ease-in-out;
93  animation-timing-function: ease-in-out;
94  -webkit-animation-duration: 6s;
95  animation-duration: 6s;
96}
97
98#checkbox:checked ~ #shuttle-wrapper #shadow {
99  -webkit-animation: shadow-launch 6s ease-in-out;
100  animation: shadow-launch 6s ease-in-out;
101}
102
103#checkbox:checked ~ #to-hover {
104  -webkit-animation-name: fadeout_010;
105  animation-name: fadeout_010;
106  -webkit-animation-duration: 6s;
107  animation-duration: 6s;
108}
109
110#checkbox:checked ~ #button #to-launch {
111  -webkit-animation-name: fadeout_010;
112  animation-name: fadeout_010;
113  -webkit-animation-duration: 6s;
114  animation-duration: 6s;
115}
116  /* and this will take care of hover */
117#clickHandler:hover ~ #button {
118  width: 200px;
119  height: 200px;
120  -webkit-transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
121  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
122  -webkit-box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
123  28px 28px 28px 0 rgba(28, 27, 88, 0.315);
124  box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
125  28px 28px 28px 0 rgba(28, 27, 88, 0.315);
126  -webkit-transition-delay: 0ms;
127  transition-delay: 0ms;
128}
129
130.container:hover {
131  -webkit-transform: translateY(30%);
132  -ms-transform: translateY(30%);
133  transform: translateY(30%);
134}
135
136#to-launch {
137  color: rgb(1, 85, 255);
138  font-size: large;
139  font-weight: bold;
140  -webkit-transition: ease-out 200ms;
141  transition: ease-out 200ms;
142}
143
144#to-hover {
145  margin-top: 1em;
146  text-align: center;
147  -webkit-transition: ease-out 200ms;
148  transition: ease-out 200ms;
149}
150
151#tag {
152  opacity: 0;
153  color: rgb(43, 43, 43);
154  position: absolute;
155}
156
157#platform {
158  position: absolute;
159  width: 70%;
160  height: 0;
161  border-radius: 16px;
162  background-color: rgb(234, 234, 234);
163  -webkit-transition: 0.3s ease-in-out;
164  transition: 0.3s ease-in-out;
165  -webkit-transition-delay: 150ms;
166  transition-delay: 150ms;
167  border: solid 0px rgba(42, 42, 42, 0);
168  outline: dashed rgba(255, 173, 57, 0);
169  -moz-outline-radius: 16px;
170  outline-width: 0px;
171  outline-offset: 0px;
172}
173
174#clickHandler:hover ~ #button #platform {
175  height: 70%;
176  background: rgb(244, 244, 244);
177  border: solid 4px rgb(42, 42, 42);
178  outline: dashed rgb(255, 172, 57);
179  outline-width: 4px;
180  outline-offset: -4px;
181  -webkit-animation: shake_010 80ms infinite;
182  animation: shake_010 80ms infinite;
183}
184
185.caution {
186  -webkit-transform: translateY(-200);
187  -ms-transform: translateY(-200);
188  transform: translateY(-200);
189  position: absolute;
190  width: 100%;
191  text-align: center;
192}
193
194#checkbox:checked ~ .caution {
195  -webkit-animation-name: fadeout_010;
196  animation-name: fadeout_010;
197  -webkit-animation-duration: 6s;
198  animation-duration: 6s;
199}
200
201#caution-left {
202  -webkit-transition: 200ms ease;
203  transition: 200ms ease;
204  opacity: 0;
205  -webkit-transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
206  transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
207}
208
209#caution-right {
210  -webkit-transition: 200ms ease;
211  transition: 200ms ease;
212  opacity: 0;
213  -webkit-transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
214  transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
215}
216
217#clickHandler:hover ~ #button .caution #caution-left {
218  opacity: 1;
219  -webkit-transition: 400ms ease-in;
220  transition: 400ms ease-in;
221  animation: glow_010 1.2s infinite;
222}
223
224#clickHandler:hover ~ #button .caution #caution-right {
225  opacity: 1;
226  -webkit-transition: 400ms ease-in;
227  transition: 400ms ease-in;
228  animation: glow_010 1.2s infinite;
229}
230
231#button {
232  width: 200px;
233  height: 80px;
234  border: none;
235  border-radius: 1.8rem;
236  -webkit-transition: 0.4s ease-in-out;
237  transition: 0.4s ease-in-out;
238  -webkit-box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
239  box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
240  background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#ececec));
241  background: linear-gradient(125deg, #ffffff 50%, #f5f5ff);
242  display: -webkit-box;
243  display: -ms-flexbox;
244  display: flex;
245  -webkit-box-pack: center;
246  -ms-flex-pack: center;
247  justify-content: center;
248  -webkit-box-align: center;
249  -ms-flex-align: center;
250  align-items: center;
251  font-family: inherit;
252  -webkit-transition-delay: 100ms;
253  transition-delay: 100ms;
254}
255
256#clickHandler:hover ~ #button #to-launch {
257  opacity: 0;
258}
259
260#clickHandler:hover ~ #to-hover {
261  opacity: 0;
262}
263
264#checkbox:checked ~ #button #tag {
265  -webkit-animation: tag-transition 5s ease-in-out;
266  animation: tag-transition 5s ease-in-out;
267}
268  
269  /* launch sequence, takes only 20% of duration to completely fade out,
270	 and stays there til 90% */
271
272@keyframes launch_31 {
273  5% {
274    opacity: 1;
275  }
276
277  15%, 90% {
278    -webkit-transform: translateY(-200px);
279    transform: translateY(-200px);
280    -webkit-transition-timing-function: ease-in;
281    transition-timing-function: ease-in;
282    opacity: 0;
283  }
284
285  100% {
286    opacity: 1;
287  }
288}
289
290@keyframes shadow-launch {
291  0% {
292    opacity: 1;
293  }
294
295  10%, 90% {
296    opacity: 0;
297  }
298
299  100% {
300    opacity: 1;
301  }
302}
303
304@keyframes fadeout_010 {
305  100% {
306    opacity: 1;
307  }
308
309  0%, 20%, 90% {
310    opacity: 0;
311  }
312}
313
314@keyframes shake_010 {
315  0%, 50% {
316    -webkit-transform: translate3d(1px, 0px, 0px);
317    transform: translate3d(1px, 0px, 0px);
318  }
319
320  100% {
321    -webkit-transform: translate3d(0px, 1px, 0px);
322    transform: translate3d(0px, 1px, 0px);
323  }
324}
325
326@keyframes glow_010 {
327  0% {
328    color: rgb(94, 94, 94);
329    -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
330    filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
331  }
332
333  70% {
334    color: rgba(255, 255, 255, 0);
335  }
336
337  100% {
338    color: rgb(94, 94, 94);
339    -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
340    filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
341  }
342}
343
344@keyframes tag-transition {
345  0%, 100% {
346    opacity: 0;
347  }
348
349  20%, 80% {
350    opacity: 1;
351  }
352}
353
354.noselect {
355  -webkit-touch-callout: none;
356   /* iOS Safari */
357  -webkit-user-select: none;
358   /* Safari */
359   /* Konqueror HTML */
360  -moz-user-select: none;
361   /* Old versions of Firefox */
362  -ms-user-select: none;
363   /* Internet Explorer/Edge */
364  user-select: none;
365   /* Non-prefixed version, currently
366									supported by Chrome, Edge, Opera and Firefox */
367}

/* overengeneered pure css action button */
/* UIVERSE CSS Challenge entry */
/* by kennyotsu <3 */

/* container wraps everything together, applies general styles and does nothing else*/
.container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 200px;
  height: 200px;
  color: rgb(131, 131, 131);
  -webkit-transition: 400ms ease-in-out;
  transition: 400ms ease-in-out;
  transform: translateY(20px);
}
  
  /* clickHandler, as the name suggests, handles clicks. 
	 Its a label for invisible checkbox, positioned absolutely and taking whole container space.
	 Comes with insane z-index. Stays above .container
	 When clicked, will change input state to checked */
#shuttle-wrapper {
  position: absolute;
  opacity: 0;
  -webkit-transition: 200ms ease-in;
  transition: 200ms ease-in;
  z-index: 200;
}

#b {
  width: 80px;
  height: auto;
  z-index: 200;
}

#shadow {
  position: absolute;
  width: 100px;
  height: 80px;
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
  transform: rotateX(45deg) rotateZ(45deg);
  bottom: -10px;
  z-index: -1;
  background: radial-gradient(rgba(0, 0, 0, 0.382) 0%, rgba(0, 0, 0, 0) 70%);
}

#clickHandler {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 999;
}

#clickHandler:hover {
  cursor: pointer;
}

.container:hover #shuttle-wrapper {
  opacity: 1;
  -webkit-transform: translateY(-100px) translateZ(140px);
  -ms-transform: translateY(-100px) translateZ(140px);
  transform: translateY(-100px) translateZ(140px);
  -webkit-transition: 400ms ease-in-out;
  transition: 400ms ease-in-out;
}

#checkbox {
	/* comment out to actually see the checkbox state */
  display: none;
	/*  */
  position: absolute;
  bottom: 0px;
  width: 200px;
}
  
  /* this pseudo-selectors will fire animations when 
	 clickHandler changes checkbox state to checked */
#checkbox:checked ~ #shuttle-wrapper #b {
  -webkit-animation-name: launch_31;
  animation-name: launch_31;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#checkbox:checked ~ #shuttle-wrapper #shadow {
  -webkit-animation: shadow-launch 6s ease-in-out;
  animation: shadow-launch 6s ease-in-out;
}

#checkbox:checked ~ #to-hover {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#checkbox:checked ~ #button #to-launch {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}
  /* and this will take care of hover */
#clickHandler:hover ~ #button {
  width: 200px;
  height: 200px;
  -webkit-transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  -webkit-box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
  28px 28px 28px 0 rgba(28, 27, 88, 0.315);
  box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
  28px 28px 28px 0 rgba(28, 27, 88, 0.315);
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
}

.container:hover {
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
}

#to-launch {
  color: rgb(1, 85, 255);
  font-size: large;
  font-weight: bold;
  -webkit-transition: ease-out 200ms;
  transition: ease-out 200ms;
}

#to-hover {
  margin-top: 1em;
  text-align: center;
  -webkit-transition: ease-out 200ms;
  transition: ease-out 200ms;
}

#tag {
  opacity: 0;
  color: rgb(43, 43, 43);
  position: absolute;
}

#platform {
  position: absolute;
  width: 70%;
  height: 0;
  border-radius: 16px;
  background-color: rgb(234, 234, 234);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 150ms;
  transition-delay: 150ms;
  border: solid 0px rgba(42, 42, 42, 0);
  outline: dashed rgba(255, 173, 57, 0);
  -moz-outline-radius: 16px;
  outline-width: 0px;
  outline-offset: 0px;
}

#clickHandler:hover ~ #button #platform {
  height: 70%;
  background: rgb(244, 244, 244);
  border: solid 4px rgb(42, 42, 42);
  outline: dashed rgb(255, 172, 57);
  outline-width: 4px;
  outline-offset: -4px;
  -webkit-animation: shake_010 80ms infinite;
  animation: shake_010 80ms infinite;
}

.caution {
  -webkit-transform: translateY(-200);
  -ms-transform: translateY(-200);
  transform: translateY(-200);
  position: absolute;
  width: 100%;
  text-align: center;
}

#checkbox:checked ~ .caution {
  -webkit-animation-name: fadeout_010;
  animation-name: fadeout_010;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

#caution-left {
  -webkit-transition: 200ms ease;
  transition: 200ms ease;
  opacity: 0;
  -webkit-transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
}

#caution-right {
  -webkit-transition: 200ms ease;
  transition: 200ms ease;
  opacity: 0;
  -webkit-transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

#clickHandler:hover ~ #button .caution #caution-left {
  opacity: 1;
  -webkit-transition: 400ms ease-in;
  transition: 400ms ease-in;
  animation: glow_010 1.2s infinite;
}

#clickHandler:hover ~ #button .caution #caution-right {
  opacity: 1;
  -webkit-transition: 400ms ease-in;
  transition: 400ms ease-in;
  animation: glow_010 1.2s infinite;
}

#button {
  width: 200px;
  height: 80px;
  border: none;
  border-radius: 1.8rem;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
  box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
  background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#ececec));
  background: linear-gradient(125deg, #ffffff 50%, #f5f5ff);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: inherit;
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}

#clickHandler:hover ~ #button #to-launch {
  opacity: 0;
}

#clickHandler:hover ~ #to-hover {
  opacity: 0;
}

#checkbox:checked ~ #button #tag {
  -webkit-animation: tag-transition 5s ease-in-out;
  animation: tag-transition 5s ease-in-out;
}
  
  /* launch sequence, takes only 20% of duration to completely fade out,
	 and stays there til 90% */

@keyframes launch_31 {
  5% {
    opacity: 1;
  }

  15%, 90% {
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shadow-launch {
  0% {
    opacity: 1;
  }

  10%, 90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeout_010 {
  100% {
    opacity: 1;
  }

  0%, 20%, 90% {
    opacity: 0;
  }
}

@keyframes shake_010 {
  0%, 50% {
    -webkit-transform: translate3d(1px, 0px, 0px);
    transform: translate3d(1px, 0px, 0px);
  }

  100% {
    -webkit-transform: translate3d(0px, 1px, 0px);
    transform: translate3d(0px, 1px, 0px);
  }
}

@keyframes glow_010 {
  0% {
    color: rgb(94, 94, 94);
    -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
    filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
  }

  70% {
    color: rgba(255, 255, 255, 0);
  }

  100% {
    color: rgb(94, 94, 94);
    -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
    filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
  }
}

@keyframes tag-transition {
  0%, 100% {
    opacity: 0;
  }

  20%, 80% {
    opacity: 1;
  }
}

.noselect {
  -webkit-touch-callout: none;
   /* iOS Safari */
  -webkit-user-select: none;
   /* Safari */
   /* Konqueror HTML */
  -moz-user-select: none;
   /* Old versions of Firefox */
  -ms-user-select: none;
   /* Internet Explorer/Edge */
  user-select: none;
   /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}

kennyotsu

kotsu

Fullstack MERN web developer from Saint-Petersburg, Russia. 1+ years of commercial developement. Lead of ongoing ATG LLC projects

MIT License

Copyright - 2023 kennyotsu (kotsu) 

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.