1.uiverse {
2  --duration: 7s;
3  --easing: linear;
4  --c-color-1: #ff5252;
5 /* Changed to red */
6  --c-color-2: #00bcd4;
7 /* Changed to cyan */
8  --c-color-3: #9c27b0;
9 /* Changed to purple */
10  --c-color-4: #ffeb3b;
11 /* Changed to yellow */
12  --c-shadow: rgba(0, 0, 0, 0.3);
13 /* Changed shadow color */
14  --c-shadow-inset-top: rgba(0, 0, 0, 0.5);
15 /* Changed shadow color */
16  --c-shadow-inset-bottom: rgba(0, 0, 0, 0.4);
17 /* Changed shadow color */
18  --c-radial-inner: #ff4081;
19 /* Changed to pink */
20  --c-radial-outer: #2196f3;
21 /* Changed to blue */
22  --c-color: #fff;
23  -webkit-tap-highlight-color: transparent;
24  -webkit-appearance: none;
25  outline: none;
26  position: relative;
27  cursor: pointer;
28  border: none;
29  display: table;
30  border-radius: 24px;
31  padding: 0;
32  margin: 0;
33  text-align: center;
34  font-weight: 600;
35  font-size: 16px;
36  letter-spacing: 0.02em;
37  line-height: 1.5;
38  color: var(--c-color);
39  background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
40  box-shadow: 0 0 14px var(--c-shadow);
41}
42
43.uiverse:before {
44  content: '';
45  pointer-events: none;
46  position: absolute;
47  z-index: 3;
48  left: 0;
49  top: 0;
50  right: 0;
51  bottom: 0;
52  border-radius: 24px;
53  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);
54}
55
56.uiverse .wrapper {
57  -webkit-mask-image: -webkit-radial-gradient(white, black);
58  overflow: hidden;
59  border-radius: 24px;
60  min-width: 132px;
61  padding: 12px 0;
62}
63
64.uiverse .wrapper span {
65  display: inline-block;
66  position: relative;
67  z-index: 1;
68}
69
70.uiverse .wrapper .circle {
71  position: absolute;
72  left: 0;
73  top: 0;
74  width: 40px;
75  height: 40px;
76  border-radius: 50%;
77  filter: blur(var(--blur, 8px));
78  background: var(--background, transparent);
79  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
80  animation: var(--animation, none) var(--duration) var(--easing) infinite;
81}
82
83.uiverse .wrapper .circle.circle-1, .uiverse .wrapper .circle.circle-9, .uiverse .wrapper .circle.circle-10 {
84  --background: var(--c-color-4);
85}
86
87.uiverse .wrapper .circle.circle-3, .uiverse .wrapper .circle.circle-4 {
88  --background: var(--c-color-2);
89  --blur: 14px;
90}
91
92.uiverse .wrapper .circle.circle-5, .uiverse .wrapper .circle.circle-6 {
93  --background: var(--c-color-3);
94  --blur: 16px;
95}
96
97.uiverse .wrapper .circle.circle-2, .uiverse .wrapper .circle.circle-7, .uiverse .wrapper .circle.circle-8, .uiverse .wrapper .circle.circle-11, .uiverse .wrapper .circle.circle-12 {
98  --background: var(--c-color-1);
99  --blur: 12px;
100}
101
102.uiverse .wrapper .circle.circle-1 {
103  --x: 0;
104  --y: -40px;
105  --animation: circle-1;
106}
107
108.uiverse .wrapper .circle.circle-2 {
109  --x: 92px;
110  --y: 8px;
111  --animation: circle-2;
112}
113
114.uiverse .wrapper .circle.circle-3 {
115  --x: -12px;
116  --y: -12px;
117  --animation: circle-3;
118}
119
120.uiverse .wrapper .circle.circle-4 {
121  --x: 80px;
122  --y: -12px;
123  --animation: circle-4;
124}
125
126.uiverse .wrapper .circle.circle-5 {
127  --x: 12px;
128  --y: -4px;
129  --animation: circle-5;
130}
131
132.uiverse .wrapper .circle.circle-6 {
133  --x: 56px;
134  --y: 16px;
135  --animation: circle-6;
136}
137
138.uiverse .wrapper .circle.circle-7 {
139  --x: 8px;
140  --y: 28px;
141  --animation: circle-7;
142}
143
144.uiverse .wrapper .circle.circle-8 {
145  --x: 28px;
146  --y: -4px;
147  --animation: circle-8;
148}
149
150.uiverse .wrapper .circle.circle-9 {
151  --x: 20px;
152  --y: -12px;
153  --animation: circle-9;
154}
155
156.uiverse .wrapper .circle.circle-10 {
157  --x: 64px;
158  --y: 16px;
159  --animation: circle-10;
160}
161
162.uiverse .wrapper .circle.circle-11 {
163  --x: 4px;
164  --y: 4px;
165  --animation: circle-11;
166}
167
168.uiverse .wrapper .circle.circle-12 {
169  --blur: 14px;
170  --x: 52px;
171  --y: 4px;
172  --animation: circle-12;
173}
174
175@keyframes circle-1 {
176  33% {
177    transform: translate(0px, 16px) translateZ(0);
178  }
179
180  66% {
181    transform: translate(12px, 64px) translateZ(0);
182  }
183}
184
185@keyframes circle-2 {
186  33% {
187    transform: translate(80px, -10px) translateZ(0);
188  }
189
190  66% {
191    transform: translate(72px, -48px) translateZ(0);
192  }
193}
194
195@keyframes circle-3 {
196  33% {
197    transform: translate(20px, 12px) translateZ(0);
198  }
199
200  66% {
201    transform: translate(12px, 4px) translateZ(0);
202  }
203}
204
205@keyframes circle-4 {
206  33% {
207    transform: translate(76px, -12px) translateZ(0);
208  }
209
210  66% {
211    transform: translate(112px, -8px) translateZ(0);
212  }
213}
214
215@keyframes circle-5 {
216  33% {
217    transform: translate(84px, 28px) translateZ(0);
218  }
219
220  66% {
221    transform: translate(40px, -32px) translateZ(0);
222  }
223}
224
225@keyframes circle-6 {
226  33% {
227    transform: translate(28px, -16px) translateZ(0);
228  }
229
230  66% {
231    transform: translate(76px, -56px) translateZ(0);
232  }
233}
234
235@keyframes circle-7 {
236  33% {
237    transform: translate(8px, 28px) translateZ(0);
238  }
239
240  66% {
241    transform: translate(20px, -60px) translateZ(0);
242  }
243}
244
245@keyframes circle-8 {
246  33% {
247    transform: translate(32px, -4px) translateZ(0);
248  }
249
250  66% {
251    transform: translate(56px, -20px) translateZ(0);
252  }
253}
254
255@keyframes circle-9 {
256  33% {
257    transform: translate(20px, -12px) translateZ(0);
258  }
259
260  66% {
261    transform: translate(80px, -8px) translateZ(0);
262  }
263}
264
265@keyframes circle-10 {
266  33% {
267    transform: translate(68px, 20px) translateZ(0);
268  }
269
270  66% {
271    transform: translate(100px, 28px) translateZ(0);
272  }
273}
274
275@keyframes circle-11 {
276  33% {
277    transform: translate(4px, 4px) translateZ(0);
278  }
279
280  66% {
281    transform: translate(68px, 20px) translateZ(0);
282  }
283}
284
285@keyframes circle-12 {
286  33% {
287    transform: translate(56px, 0px) translateZ(0);
288  }
289
290  66% {
291    transform: translate(60px, -32px) translateZ(0);
292  }
293}