1.space-button {
2  position: relative;
3  display: flex;
4  flex-direction: column;
5  align-items: center;
6  justify-content: space-between;
7  width: 200px;
8  height: 60px;
9  background-color: #293944;
10  background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
11  border: none;
12  border-radius: 10px;
13  cursor: pointer;
14  perspective: 1000px;
15  transform: translateY(-3px);
16  overflow: hidden;
17  padding: 0 20px;
18  box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2);
19  transition: transform 0.3s ease-out;
20}
21
22.title {
23  color: wheat;
24  font-weight: bold;
25  margin-right: 10px;
26  font-size: 20px;
27}
28
29.planet {
30  content: "";
31  position: absolute;
32  width: 15px;
33  height: 15px;
34  top: 10px;
35  left: 10px;
36  background-color: rgb(224, 236, 224);
37  border-radius: 50%;
38  perspective: 1000px;
39  transform-style: preserve-3d;
40  box-shadow: inset rgb(211, 203, 177) -20px -20px 70px;
41}
42
43.planet::before {
44  position: absolute;
45  content: "";
46  width: 25px;
47  height: 25px;
48  border: solid 6px rgb(187, 173, 173);
49  border-radius: 50%;
50  top: -30%;
51  left: -30%;
52  transform: rotate3d(0.8, 0.2, 0, 75deg);
53  box-sizing: border-box;
54}
55
56.space-button:after {
57  content: "";
58  position: absolute;
59  bottom: -50%;
60  left: 0;
61  width: 100%;
62  height: 100%;
63  background-color: #688ACC;
64  transform-origin: bottom center;
65  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
66  transform: skewY(10deg) scaleY(0);
67  z-index: 2;
68}
69
70.space-button:hover:after {
71  transform-origin: bottom center;
72  transform: skewY(9.3deg) scaleY(2);
73}
74
75.space-button:active {
76  transform: translateY(0);
77  box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2);
78  border: 1px solid rgba(30, 255, 0, 0.171);
79}
80
81.space-button .rocket {
82  display: block;
83  position: absolute;
84  opacity: 0;
85  bottom: 10%;
86  border: 0;
87  height: 40%;
88  transform: translateY(225%) translateX(-50%);
89  transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
90  z-index: 3;
91}
92
93.flex {
94  display: flex;
95  flex-direction: row-reverse;
96  align-items: center;
97  justify-content: flex-start;
98  padding: 0 20px;
99  height: 100%;
100  width: 100%;
101}
102
103.space-button:hover .rocket {
104  fill: white;
105  animation: shake_3019 .1s infinite;
106  transform: translateX(-50%) translateY(-100%);
107  opacity: 1;
108  transition: all .9s cubic-bezier(0.48, 0, 0.12, 1);
109}
110
111.space-button:focus .rocket {
112  animation: push_3019 5s ease-in infinite;
113}
114
115@keyframes push_3019 {
116  0% {
117    transform: rotate(-45deg) translateY(0px);
118  }
119
120  33% {
121    transform: translateY(-500px);
122  }
123
124  65% {
125    transform: rotate(180deg);
126  }
127
128  66% {
129    transform: rotate(-45deg) translateY(0px);
130  }
131
132  100% {
133    transform: rotate(-45deg);
134  }
135}
136
137@keyframes shake_3019 {
138  0% {
139    transform: rotate(-45deg) translateX(-1px) translateY(1px);
140  }
141
142  100% {
143    transform: rotate(-45deg) translateX(1px) translateY(-1px);
144  }
145}
146
147
148
149