Button by mininaim

1.space-button {
2  font-size: 1.2rem;
3  font-weight: bold;
4  text-transform: uppercase;
5  border: none;
6  border-radius: 5px;
7  padding: 10px 20px;
8  transition: all 0.3s ease;
9  display: flex;
10  align-items: center;
11}
12
13.space-icon {
14  margin-right: 10px;
15  fill: currentColor;
16}
17
18/* Light Mode */
19@media (prefers-color-scheme: light) {
20  .space-button {
21    background-color: #0074D9;
22    color: #fff;
23    box-shadow: 0px 0px 10px 0px #0074D9;
24  }
25
26  .space-button:hover {
27    box-shadow: 0px 0px 20px 0px #fff;
28  }
29
30  .space-button:active {
31    box-shadow: none;
32    background-color: #001f3f;
33  }
34}
35
36/* Dark Mode */
37@media (prefers-color-scheme: dark) {
38  .space-button {
39    background-color: #f0f0f0;
40    color: #000;
41    box-shadow: 0px 0px 10px 0px #000;
42  }
43
44  .space-button:hover {
45    box-shadow: 0px 0px 20px 0px #fff;
46  }
47
48  .space-button:active {
49    box-shadow: none;
50    background-color: #bbb;
51  }
52}
53