1button#space-btn {
2  width: 100%;
3  height: 100%;
4  position: relative;
5  overflow: hidden;
6  border: 0;
7  outline: 0;
8  border-radius: 11px;
9  background: #03001e;
10  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
11  cursor: pointer;
12}
13
14.btn-container {
15  width: 200px;
16  height: 60px;
17  position: relative;
18  overflow: visible;
19}
20
21.btn-container::after {
22  content: "";
23  width: 100%;
24  height: 100%;
25  position: absolute;
26  left: 0;
27  top: 20px;
28  z-index: -1;
29  background: #03001e;
30  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);
31  filter: blur(20px);
32  opacity: 0;
33}
34
35.btn-container:hover {
36  transform: scale(1.1);
37  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
38}
39
40.btn-container:hover:after {
41  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
42  opacity: 0.6;
43}
44
45button span {
46  color: white;
47  font-weight: 700;
48  font-size: 16px;
49}
50
51button#space-btn div.star {
52  width: 1px;
53  height: 1px;
54  background-color: white;
55  border-radius: 50%;
56  animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
57}
58
59button#space-btn div.shooting-star {
60  width: 80px;
61  height: 1px;
62  position: absolute;
63  background: linear-gradient(80deg, #ffffffff, #ffffff00);
64  border-radius: 50%;
65  transform: rotate(-40deg);
66  opacity: 0
67}
68
69button#space-btn div.shooting-star-1 {
70  animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
71}
72
73button#space-btn div.shooting-star-2 {
74  animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
75}
76
77button#space-btn div.shooting-star-3 {
78  animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
79}
80
81button#space-btn div.shooting-star-4 {
82  animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;
83}
84
85@keyframes blink {
86  0% {
87    box-shadow: 0 0 10px 0 white;
88  }
89
90  50% {
91    box-shadow: 0 0 10px 2px white;
92  }
93
94  100% {
95    box-shadow: 0 0 10px 0 white;
96  }
97}
98
99@keyframes fallingStar1 {
100  0% {
101    top: -10px;
102    left: 220px;
103    opacity: 1;
104  }
105
106  100% {
107    top: 200px;
108    left: -20px;
109    opacity: 1;
110  }
111}
112
113@keyframes fallingStar2 {
114  0% {
115    top: -10px;
116    left: 150px;
117    opacity: 1;
118  }
119
120  100% {
121    top: 200px;
122    left: -90px;
123    opacity: 1;
124  }
125}
126
127@keyframes fallingStar3 {
128  0% {
129    top: -10px;
130    left: 80px;
131    opacity: 1
132  }
133
134  100% {
135    top: 200px;
136    left: -160px;
137    opacity: 1
138  }
139}
140
141@keyframes fallingStar4 {
142  0% {
143    top: -10px;
144    left: 0px;
145    opacity: 1;
146  }
147
148  100% {
149    top: 200px;
150    left: -240px;
151    opacity: 1;
152  }
153}
154