1.main {
2  align-items: center;
3  justify-content: center;
4  transform: translate(0%,25%);
5}
6
7button {
8  width: 13em;
9  height: 3.5em;
10  border: none;
11  display: flex;
12  align-items: center;
13  background-color: #171717;
14  border-radius: 15px;
15  padding-left: 1em;
16  z-index: 3;
17  overflow: hidden;
18  transition: .4s ease-in-out;
19}
20
21.text {
22  color: white;
23  padding-left: 0.5em;
24  padding-top: 0.1em;
25  letter-spacing: 0.8em;
26  transition: .4s ease-in-out;
27  z-index: 3;
28  font-weight: bold;
29}
30
31.planet {
32  position: relative;
33  margin-left: -9.55em;
34  left: 2.6em;
35  scale: 4;
36  transition: .4s ease-in-out;
37}
38
39.img {
40  margin-left: -7.25em;
41  margin-top: 6.3em;
42  transition: .4s ease-in-out;
43  z-index: -2;
44}
45
46.img .stars {
47  margin-right: -0.8em;
48  margin-top: 7em;
49  scale: 0.85;
50  opacity: 0;
51  transition: .4s ease-in-out;
52}
53
54.img .astronaut {
55  position: relative;
56  top: -6.2em;
57  left: .65em;
58}
59
60.satalite {
61  position: relative;
62  left: -1em;
63  top: -3em;
64  animation: 4s around infinite;
65  transition: .4s ease-in-out;
66}
67
68@keyframes around {
69  0% {
70    z-index: 5;
71    transform: translateY(-3.5em) translateX(8.5em);
72  }
73
74  50% {
75    transform: translateX(1em) translateY(3.5em);
76  }
77
78  100% {
79    transform: translateY(-3.5em) translateX(8.5em);
80    z-index: -2;
81  }
82}
83
84button:hover .img {
85  margin-top: -1em;
86  z-index: 4;
87}
88
89button:hover .text {
90  opacity: 0;
91}
92
93button:hover .planet {
94  opacity: 0;
95}
96
97button:hover + .satalite {
98  opacity: 0;
99}
100
101button:active {
102  transform: scale(0.9);
103}
104
105button:active .stars {
106  opacity: 1;
107}