1.btn {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  width: 13rem;
6  height: 3rem;
7  background-size: 300% 300%;
8  backdrop-filter: blur(1rem);
9  border-radius: 5rem;
10  transition: 0.5s;
11  animation: gradient_301 5s ease infinite;
12  border: double 4px transparent;
13  background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
14  background-origin: border-box;
15  background-clip: content-box, border-box;
16}
17
18#container-stars {
19  position: fixed;
20  z-index: -1;
21  width: 100%;
22  height: 100%;
23  overflow: hidden;
24  transition: 0.5s;
25  backdrop-filter: blur(1rem);
26  border-radius: 5rem;
27}
28
29strong {
30  z-index: 2;
31  font-family: 'Avalors Personal Use';
32  font-size: 12px;
33  letter-spacing: 5px;
34  color: #FFFFFF;
35  text-shadow: 0 0 4px white;
36}
37
38#glow {
39  position: absolute;
40  display: flex;
41  width: 12rem;
42}
43
44.circle {
45  width: 100%;
46  height: 30px;
47  filter: blur(2rem);
48  animation: pulse_3011 4s infinite;
49  z-index: -1;
50}
51
52.circle:nth-of-type(1) {
53  background: rgba(254, 83, 186, 0.636);
54}
55
56.circle:nth-of-type(2) {
57  background: rgba(142, 81, 234, 0.704);
58}
59
60.btn:hover #container-stars {
61  z-index: 1;
62  background-color: #212121;
63}
64
65.btn:hover {
66  transform: scale(1.1)
67}
68
69.btn:active {
70  border: double 4px #FE53BB;
71  background-origin: border-box;
72  background-clip: content-box, border-box;
73  animation: none;
74}
75
76.btn:active .circle {
77  background: #FE53BB;
78}
79
80#stars {
81  position: relative;
82  background: transparent;
83  width: 200rem;
84  height: 200rem;
85}
86
87#stars::after {
88  content: "";
89  position: absolute;
90  top: -10rem;
91  left: -100rem;
92  width: 100%;
93  height: 100%;
94  animation: animStarRotate 90s linear infinite;
95}
96
97#stars::after {
98  background-image: radial-gradient(#ffffff 1px, transparent 1%);
99  background-size: 50px 50px;
100}
101
102#stars::before {
103  content: "";
104  position: absolute;
105  top: 0;
106  left: -50%;
107  width: 170%;
108  height: 500%;
109  animation: animStar 60s linear infinite;
110}
111
112#stars::before {
113  background-image: radial-gradient(#ffffff 1px, transparent 1%);
114  background-size: 50px 50px;
115  opacity: 0.5;
116}
117
118@keyframes animStar {
119  from {
120    transform: translateY(0);
121  }
122
123  to {
124    transform: translateY(-135rem);
125  }
126}
127
128@keyframes animStarRotate {
129  from {
130    transform: rotate(360deg);
131  }
132
133  to {
134    transform: rotate(0);
135  }
136}
137
138@keyframes gradient_301 {
139  0% {
140    background-position: 0% 50%;
141  }
142
143  50% {
144    background-position: 100% 50%;
145  }
146
147  100% {
148    background-position: 0% 50%;
149  }
150}
151
152@keyframes pulse_3011 {
153  0% {
154    transform: scale(0.75);
155    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
156  }
157
158  70% {
159    transform: scale(1);
160    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
161  }
162
163  100% {
164    transform: scale(0.75);
165    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
166  }
167}