1button {
2  --black-hole-color-2: rgb(242, 122, 42);
3  --black-hole-color: rgb(230, 148, 93);
4  font-size: 17px;
5  position: relative;
6  background: #212121;
7  padding: 0.5em;
8  border: 2px solid var(--black-hole-color);
9  border-radius: 8px;
10}
11
12button:hover {
13  border: 2px solid var(--black-hole-color-2);
14  animation: alert 1s alternate infinite linear;
15}
16
17.blackhole {
18  padding: 3em;
19  background-color: black;
20  color: var(--black-hole-color);
21  position: absolute;
22  animation: wiggle 3s alternate-reverse infinite linear;
23  top: -1em;
24  left: -8em;
25}
26
27.blackhole, .blackhole::after, .blackhole::before, .blackhole .ring, .blackhole .ring::after {
28  content: "";
29  border: 2px solid var(--black-hole-color);
30  border-radius: 50%;
31  box-shadow: 0 0 3em,
32              0 0 1em;
33}
34
35.blackhole::after, .blackhole::before {
36  animation: writhe 3s alternate-reverse infinite linear;
37}
38
39.blackhole::before {
40  position: absolute;
41  width: calc(100% + 0.5em);
42  height: calc(100% + 0.5em);
43  top: -9px;
44  left: -7px;
45}
46
47.blackhole::after {
48  position: absolute;
49  width: calc(100% + 8px);
50  height: calc(100% + 8px);
51  top: -6px;
52  left: -5px;
53}
54
55.blackhole .ring, .blackhole .ring::after {
56  content: "";
57  position: absolute;
58  left: -50%;
59  width: 200%;
60  border-top: none;
61  height: 2em;
62  border-width: 5px;
63  box-shadow: 0px 5px 10px var(--black-hole-color);
64}
65
66.blackhole .ring, .blackhole .ring::after {
67  animation: ring-writhe 3s alternate-reverse infinite linear;
68}
69
70.blackhole .block {
71  position: absolute;
72  z-index: 90;
73  content: "";
74  background-color: black;
75  top: -20%;
76  left: 25%;
77  width: 50%;
78  height: 10px;
79}
80
81.blackhole .ring::after {
82  width: 110%;
83  left: -8%;
84}
85
86.blackhole .rocket {
87  fill: white;
88  height: 30px;
89  transform: rotate(-140deg);
90  animation: idle 1s alternate-reverse infinite linear;
91}
92
93.blackhole .rocket-path {
94  position: absolute;
95  top: -60px;
96  right: -60px;
97}
98
99button:hover .rocket-path, button:focus .rocket-path {
100  z-index: 100;
101  animation: engine-start 0.2s alternate-reverse infinite linear;
102}
103
104button:focus  .rocket-path {
105  animation: descend 1.2s linear forwards, 
106             descend-dissapear 0.1s linear forwards;
107  animation-delay: 0s, 1s;
108}
109
110button .text {
111  display: flex;
112  color: white;
113}
114
115@keyframes idle {
116  from {
117    transform: rotate(-130deg);
118  }
119
120  to {
121    transform: rotate(-140deg);
122  }
123}
124
125@keyframes alert {
126  from {
127    box-shadow: 0 0 0 var(--black-hole-color);
128  }
129
130  to {
131    box-shadow: 0 0 8px var(--black-hole-color);
132  }
133}
134
135@keyframes engine-start {
136  from {
137    transform: scale(1);
138  }
139
140  to {
141    transform: scale(1.05);
142  }
143}
144
145@keyframes descend {
146  from {
147    top: -60px;
148    right: -60px;
149    transform: scale(1);
150  }
151
152  to {
153    top: -10px;
154    right: -10px;
155    transform: scale(0.8);
156  }
157}
158
159@keyframes descend-dissapear {
160  from {
161    top: -10px;
162    right: -10px;
163    transform: scale(1);
164  }
165
166  to {
167    top: 20px;
168    right: 20px;
169    transform: scale(0);
170  }
171}
172
173@keyframes writhe {
174  from {
175    box-shadow: -4px -3px 35px var(--black-hole-color-2),
176              -4px -3px 5px;
177    transform: translateX(-1px) scale(1);
178  }
179
180  to {
181    box-shadow: 4px 3px 35px,
182              4px 3px 5px var(--black-hole-color-2);
183    transform: translateX(1px) scale(0.95);
184  }
185}
186
187@keyframes wiggle {
188  from {
189    transform: translateX(-3px);
190  }
191
192  to {
193    transform: translateX(3px);
194  }
195}
196
197@keyframes ring-writhe {
198  from {
199    transform: translateX(-2px) scale(1);
200    box-shadow: -2px 5px 10px var(--black-hole-color);
201  }
202
203  to {
204    box-shadow: 2px 5px 10px var(--black-hole-color-2);
205    transform: translateX(2px) scale(0.95);
206  }
207}
208