1button {
2  border: 0;
3  background: radial-gradient(ellipse at 50% 50%,black 20%,transparent 72%);
4  font-size: 17px;
5  height: 200px;
6  width: 300px;
7  zoom: 1.2;
8}
9
10.main {
11  width: 70px;
12  margin: auto;
13  position: relative;
14  transform: rotateZ(0deg);
15  isolation: isolate;
16  scale: 1;
17  transition: all 1.5s;
18}
19
20.main:hover {
21  transform: rotateZ(240deg);
22  scale: 2;
23  /* filter: drop-shadow(10px,10px,10px,white); */
24  filter: drop-shadow(-1px -1px 5px #69e9d6);
25}
26
27.rings {
28  position: absolute;
29  width: 200px;
30  height: 100px;
31  /* background-color: #000000; */
32  border-radius: 150px 150px 0 0;
33  background: radial-gradient(circle at 50% 100%,transparent 30%, #69e9d6 40%,#404D44 50%,#44867c 60%,#404D44 70%,transparent);
34}
35
36#saturn {
37  width: 70px;
38  height: 70px;
39  border-radius: 50%;
40  background: linear-gradient(80deg,#69e9d6,#404D44,#000000);
41}
42
43#ring1 {
44  transform: rotateX(80deg);
45  top: -20px;
46  left: -65px;
47}
48
49#ring2 {
50  transform: rotateX(-100deg);
51  left: -65px;
52  z-index: -1;
53  top: -3px;
54}
55
56.asteriods-large {
57  position: absolute;
58  width: 8px;
59  height: 10px;
60  border-radius: 15px 8px;
61  background: linear-gradient(220deg,#6f7776,#598ea3,#311515);
62  transform: rotateZ(0deg);
63  transition: all 3s;
64}
65
66#asteriod1 {
67  top: 8px;
68  height: 12px;
69  width: 12px;
70  border-radius: 50%;
71}
72
73#asteriod2 {
74  top: 35px;
75  height: 10px;
76  left: -55px;
77}
78
79#asteriod3 {
80  top: 35px;
81  height: 8px;
82  left: 85px;
83}
84
85#asteriod4 {
86  top: 40px;
87  height: 4px;
88  width: 4px;
89  left: -40px;
90}
91
92#asteriod5 {
93  top: 35px;
94  height: 4px;
95  width: 4px;
96  left: 82px;
97}
98
99.asteriods-small {
100  position: absolute;
101  width: 4px;
102  height: 3px;
103  border-radius: 15px 8px;
104  background: linear-gradient(80deg,#6f7776,#598ea3,#311515);
105  transform-origin: 50px 50px;
106  transform: rotateZ(0deg);
107  transition: all 3s;
108}
109
110#asteriod6 {
111  top: 6px;
112  left: -5px;
113  border-radius: 50%;
114}
115
116#asteriod7 {
117  top: 15px;
118  left: -35px;
119}
120
121#asteriod8 {
122  top: 35px;
123  left: 65px;
124}
125
126#asteriod9 {
127  top: 60px;
128  left: -10px;
129}
130
131#asteriod10 {
132  top: 15px;
133  left: 112px;
134}
135
136#explore {
137  position: absolute;
138  top: 32px;
139  font-size: 15px;
140  color: hsl(171, 59%, 74%);
141  left: 10px;
142  transition: all 3s;
143}
144
145.main:hover > .asteriods-large,.main:hover > .asteriods-small {
146  transform: translateX(28px);
147}
148
149.main:hover > #explore {
150  translate: -10px 20px;
151  transform: rotateZ(120deg);
152}
153
154.main:not(hover) > #explore {
155  translate: 0px;
156  transform: rotateZ(0deg);
157}
158
159.main:not(hover) > .asteriods-large,.main:not(hover) > .asteriods-small {
160  transform: translateX(0px);
161}
162
163.main:is(:active) > #explore {
164  translate: -100px 200px;
165}
166
167.main:is(:active) {
168  translate: -200px;
169}
170
171