.nb-bubbles-button {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
outline: none;
position: relative;
cursor: pointer;
border: none;
display: table;
width: fit-content;
border-radius: var(--border-radius);
padding: 0;
margin: 0;
background: radial-gradient(
circle,
var(--c-radial-inner),
var(--c-radial-outer) 80%
);
}
.nb-bubbles-button:before {
content: "";
pointer-events: none;
position: absolute;
z-index: 3;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: var(--border-radius);
}
.nb-bubbles-button__wrapper {
-webkit-mask-image: -webkit-radial-gradient(white, black);
overflow: hidden;
border-radius: var(--border-radius);
}
.nb-bubbles-button__label {
display: inline-block;
position: relative;
z-index: 1;
}
.nb-bubbles-button__circle {
position: absolute;
left: 0;
top: 0;
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 var(--delay);
}
@keyframes move-down-right {
33% {
transform: translate(0px, 16px) translateZ(0);
}
66% {
transform: translate(12px, 64px) translateZ(0);
}
}
@keyframes move-up-left {
33% {
transform: translate(80px, -10px) translateZ(0);
}
66% {
transform: translate(72px, -48px) translateZ(0);
}
}
@keyframes move-diagonal {
33% {
transform: translate(20px, 12px) translateZ(0);
}
66% {
transform: translate(12px, 4px) translateZ(0);
}
}
@keyframes move-right {
33% {
transform: translate(76px, -12px) translateZ(0);
}
66% {
transform: translate(112px, -8px) translateZ(0);
}
}
@keyframes move-zigzag {
33% {
transform: translate(84px, 28px) translateZ(0);
}
66% {
transform: translate(40px, -32px) translateZ(0);
}
}
@keyframes move-left {
33% {
transform: translate(28px, -16px) translateZ(0);
}
66% {
transform: translate(76px, -56px) translateZ(0);
}
}
@keyframes move-up {
33% {
transform: translate(8px, 28px) translateZ(0);
}
66% {
transform: translate(20px, -60px) translateZ(0);
}
}
@keyframes move-horizontal {
33% {
transform: translate(32px, -4px) translateZ(0);
}
66% {
transform: translate(56px, -20px) translateZ(0);
}
}
@keyframes move-vertical {
33% {
transform: translate(20px, -12px) translateZ(0);
}
66% {
transform: translate(80px, -8px) translateZ(0);
}
}
@keyframes move-right-up {
33% {
transform: translate(68px, 20px) translateZ(0);
}
66% {
transform: translate(100px, 28px) translateZ(0);
}
}
@keyframes move-straight {
33% {
transform: translate(4px, 4px) translateZ(0);
}
66% {
transform: translate(68px, 20px) translateZ(0);
}
}
@keyframes move-right-down {
33% {
transform: translate(56px, 0px) translateZ(0);
}
66% {
transform: translate(60px, -32px) translateZ(0);
}
}