Button by 348799197_van

#212121

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

.uiverse {
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(26, 163, 255, 0.7);
  /* Changed color */
  --c-color-2: #2fff9b;
  /* Changed color */
  --c-color-3: #9f72ff;
  /* Changed color */
  --c-color-4: rgba(26, 232, 255, 0.7);
  /* Changed color */
  --c-shadow: rgba(87, 223, 255, 0.5);
  /* Changed color */
  --c-shadow-inset-top: rgba(52, 223, 255, 0.9);
  /* Changed color */
  --c-shadow-inset-bottom: rgba(215, 250, 255, 0.8);
  /* Changed color */
  --c-radial-inner: #15d2ff;
  /* Changed color */
  --c-radial-outer: #72faff;
  /* Changed color */
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(
    circle,
    var(--c-radial-inner),
    var(--c-radial-outer) 80%
  );
  box-shadow: 0 0 14px var(--c-shadow);
}

.uiverse:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top),
    inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 132px;
  padding: 12px 0;
}

.uiverse .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.uiverse .wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1,
.uiverse .wrapper .circle.circle-9,
.uiverse .wrapper .circle.circle-10 {
  --background: var(--c-color-4);
}

.uiverse .wrapper .circle.circle-3,
.uiverse .wrapper .circle.circle-4 {
  --background: var(--c-color-2);
  --blur: 14px;
}

.uiverse .wrapper .circle.circle-5,
.uiverse .wrapper .circle.circle-6 {
  --background: var(--c-color-3);
  --blur: 16px;
}

.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 {
  --background: var(--c-color-1);
  --blur: 12px;
}

.uiverse .wrapper .circle.circle-1 {
  --x: 0;
  --y: -40px;
  --animation: circle-1;
}

.uiverse .wrapper .circle.circle-2 {
  --x: 92px;
  --y: 8px;
  --animation: circle-2;
}

.uiverse .wrapper .circle.circle-3 {
  --x: -12px;
  --y: -12px;
  --animation: circle-3;
}

.uiverse .wrapper .circle.circle-4 {
  --x: 80px;
  --y: -12px;
  --animation: circle-4;
}

.uiverse .wrapper .circle.circle-5 {
  --x: 12px;
  --y: -4px;
  --animation: circle-5;
}

.uiverse .wrapper .circle.circle-6 {
  --x: 56px;
  --y: 16px;
  --animation: circle-6;
}

.uiverse .wrapper .circle.circle-7 {
  --x: 8px;
  --y: 28px;
  --animation: circle-7;
}

.uiverse .wrapper .circle.circle-8 {
  --x: 28px;
  --y: -4px;
  --animation: circle-8;
}

.uiverse .wrapper .circle.circle-9 {
  --x: 20px;
  --y: -12px;
  --animation: circle-9;
}

.uiverse .wrapper .circle.circle-10 {
  --x: 64px;
  --y: 16px;
  --animation: circle-10;
}

.uiverse .wrapper .circle.circle-11 {
  --x: 4px;
  --y: 4px;
  --animation: circle-11;
}

.uiverse .wrapper .circle.circle-12 {
  --blur: 14px;
  --x: 52px;
  --y: 4px;
  --animation: circle-12;
}

@keyframes circle-1 {
  33% {
    transform: translate(0px, 16px) translateZ(0);
  }

  66% {
    transform: translate(12px, 64px) translateZ(0);
  }
}

@keyframes circle-2 {
  33% {
    transform: translate(80px, -10px) translateZ(0);
  }

  66% {
    transform: translate(72px, -48px) translateZ(0);
  }
}

@keyframes circle-3 {
  33% {
    transform: translate(20px, 12px) translateZ(0);
  }

  66% {
    transform: translate(12px, 4px) translateZ(0);
  }
}

@keyframes circle-4 {
  33% {
    transform: translate(76px, -12px) translateZ(0);
  }

  66% {
    transform: translate(112px, -8px) translateZ(0);
  }
}

@keyframes circle-5 {
  33% {
    transform: translate(84px, 28px) translateZ(0);
  }

  66% {
    transform: translate(40px, -32px) translateZ(0);
  }
}

@keyframes circle-6 {
  33% {
    transform: translate(28px, -16px) translateZ(0);
  }

  66% {
    transform: translate(76px, -56px) translateZ(0);
  }
}

@keyframes circle-7 {
  33% {
    transform: translate(8px, 28px) translateZ(0);
  }

  66% {
    transform: translate(20px, -60px) translateZ(0);
  }
}

@keyframes circle-8 {
  33% {
    transform: translate(32px, -4px) translateZ(0);
  }

  66% {
    transform: translate(56px, -20px) translateZ(0);
  }
}

@keyframes circle-9 {
  33% {
    transform: translate(20px, -12px) translateZ(0);
  }

  66% {
    transform: translate(80px, -8px) translateZ(0);
  }
}

@keyframes circle-10 {
  33% {
    transform: translate(68px, 20px) translateZ(0);
  }

  66% {
    transform: translate(100px, 28px) translateZ(0);
  }
}

@keyframes circle-11 {
  33% {
    transform: translate(4px, 4px) translateZ(0);
  }

  66% {
    transform: translate(68px, 20px) translateZ(0);
  }
}

@keyframes circle-12 {
  33% {
    transform: translate(56px, 0px) translateZ(0);
  }

  66% {
    transform: translate(60px, -32px) translateZ(0);
  }
}

Toggle prefixes

117 views

Variation of abutton

Copy to Figma

117 views

Variation of abutton

Comments

MIT License

Copyright - 2024 adamgiebl (Adam Giebl) 
Copyright - 2024 348799197_van (faded) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.