.nb-ripple-button-v4 {
position: relative;
display: flex;
width: fit-content;
align-items: center;
cursor: pointer;
--layers-radius: 9999px;
}
.nb-ripple-button-v4__bg {
background-color: var(--bg-color);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1);
}
.nb-ripple-button-v4__inner,
.nb-ripple-button-v4__inner-hover,
.nb-ripple-button-v4__inner-static {
pointer-events: none;
display: block;
}
.nb-ripple-button-v4__inner {
position: relative;
}
.nb-ripple-button-v4__inner-hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translateY(70%);
}
.nb-ripple-button-v4__bg-layers {
position: absolute;
left: 50%;
transform: translate(-50%);
top: -60%;
aspect-ratio: 1 / 1;
width: max(200%, 10em);
}
.nb-ripple-button-v4__bg-layer {
border-radius: var(--layers-radius);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0);
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__inner-static {
opacity: 0;
transform: translateY(-70%);
transition:
transform var(--layers-transform-duration) var(--layers-transform-easing),
opacity 0.3s linear;
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__inner-hover {
opacity: 1;
transform: translateY(0);
transition:
transform var(--line-transform-duration) var(--line-transform-easing),
opacity var(--line-transform-duration) var(--line-transform-easing);
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__bg-layer {
transition:
transform var(--layers-transform-duration) var(--layers-transform-easing),
opacity 0.3s linear;
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__bg-layer--1 {
transform: scale(1);
background-color: var(--layer-1-color);
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__bg-layer--2 {
transition-delay: var(--delay-between-layers);
transform: scale(1);
background-color: var(--layer-2-color);
}
.nb-ripple-button-v4:hover .nb-ripple-button-v4__bg-layer--3 {
transition-delay: calc(var(--delay-between-layers) * 2);
transform: scale(1);
background-color: var(--bg-color);
}