1button#space-btn {
2  width: 200px;
3  height: 60px;
4  position: relative;
5  border: none;
6  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
7  box-shadow: inset 0px 0px 21px #3b2ad5;
8  background: #03001e;
9  cursor: pointer;
10}
11
12button#space-btn:hover {
13  background: linear-gradient(180deg, #3b2ad5 0%,#88007d 60%,#ff0055c4 100%);
14  box-shadow: 0px 5px 10px #03001e,inset 0px 5px 10px #8611d4,inset 0 -5px 10px #ff0055a1;
15}
16
17.btn-container:hover {
18  background: #03001e;
19  box-shadow: 0px -10px 40px #9611d4,0px 5px 10px #00a2ffe3,inset 0px 10px 21px #3b2ad5;
20}
21
22.btn-container {
23  display: flex;
24  justify-content: center;
25  align-items: center;
26  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
27  width: 205px;
28  height: 65px;
29  background: linear-gradient(0deg, #88007d 0%,#ff0055c4 100%);
30}
31
32button span {
33  color: white;
34  font-weight: bold;
35  font-size: 20px;
36}
37
38button div.star {
39  opacity: 0;
40  position: absolute;
41  border-radius: 100%;
42  background-color: white;
43  width: 1px;
44  height: 1px;
45}
46
47button:hover .star {
48  opacity: 1;
49}
50
51button .planet {
52  margin-left: -2.5em;
53  opacity: 0;
54  width: 30px;
55  height: 30px;
56  border-radius: 50%;
57  border: none;
58  position: absolute;
59  background: linear-gradient(rgb(255, 0, 0), transparent),linear-gradient(to top left, rgb(255, 0, 212), transparent), linear-gradient(to top right, rgb(251, 255, 0), transparent);
60  background-blend-mode: screen;
61  background-size: 100% 200%;
62  filter: drop-shadow(0px 0px 4px rgb(82, 59, 16));
63}
64
65button:hover .planet {
66  z-index: 1;
67  opacity: 1;
68  animation: orbita 6s reverse linear infinite;
69}
70
71.planet::after {
72  content: '';
73  width: 40px;
74  height: 10px;
75  border: 3px solid #813dff;
76  filter: drop-shadow(0px 0px 1px #cf3333);
77  border-width: 0px 3px 3px 3px;
78  position: absolute;
79  top: 50%;
80  left: 50%;
81  transform: translate(-50%, -50%) rotate(15deg);
82  border-radius: 50%;
83}
84
85.planet::before {
86  position: absolute;
87  color: rgb(255, 0, 0);
88  visibility: hidden;
89}
90
91.moon {
92  margin-left: -3rem;
93  position: absolute;
94  width: 30px;
95  height: 30px;
96  background-color: #fff;
97  border-radius: 100%;
98  box-shadow: 0px 0px 10px 5px rgb(146, 146, 140);
99}
100
101.moon::after {
102  position: absolute;
103  content: '';
104  margin-top: 15%;
105  box-shadow: 0px 0px 10px 3px #333;
106  margin-left: -10%;
107  border-radius: 100%;
108  width: 3px;
109  height: 3px;
110  background-color: rgb(121, 121, 121);
111}
112
113.moon1::after {
114  position: absolute;
115  content: '';
116  margin-top: 65%;
117  box-shadow: 0px 0px 8px 3px #333;
118  margin-left: -9px;
119  border-radius: 100%;
120  width: 2px;
121  height: 2px;
122  background-color: rgb(121, 121, 121);
123}
124
125.moon::before {
126  position: absolute;
127  content: '';
128  margin-top: 30%;
129  margin-left: -30%;
130  border-radius: 100%;
131  box-shadow: 0px 0px 8px 1px rgb(3, 3, 3);
132  width: 5px;
133  height: 5px;
134  background-color: rgb(134, 133, 133);
135}
136
137.moon1::before {
138  position: absolute;
139  content: '';
140  margin-top: 70%;
141  margin-left: 4%;
142  border-radius: 100%;
143  box-shadow: -5px 1px 4px 3px rgb(134, 133, 133);
144  width: 2px;
145  height: 2px;
146  background-color: rgb(134, 133, 133);
147}
148
149button span.moon,span.moon1 {
150  opacity: 0;
151}
152
153button:hover span.moon,span.moon1 {
154  z-index: -1;
155  opacity: 1;
156  animation: orbita 2.7s linear infinite;
157}
158
159@keyframes orbita {
160  0% {
161    transform: rotate(0deg);
162    transform: translateX(90px);
163  }
164
165  100% {
166    rotate: 360deg;
167    transform: translateX(90px);
168  }
169}