Button by StealthWorm

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