.next-ripple-button-v3[data-next-hide]{
opacity: 0;
} .next-ripple-button-v3{
display: flex;
white-space: nowrap;
overflow: hidden;
text-align: center;
width: fit-content;
height: fit-content;
--border-radius: 100px; border-radius: var(--border-radius); background: white; }
.next-ripple-button-v3__wrapper{
position: relative;
padding: 15px 30px; --translate-animation-duration: 0.4s;
--translate-animation-easing: cubic-bezier(.33,1,.68,1);
--translate-animation-delay: 0s;
transition: transform var(--translate-animation-duration) var(--translate-animation-easing) var(--translate-animation-delay); }
.next-ripple-button-v3__title--top{ color: black; }
.next-ripple-button-v3__bottom{
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.next-ripple-button-v3__title--bottom{
position: absolute; color: black; }
.next-ripple-button-v3__mask{
background-color: #c9ff18; border-radius: 50%;
width: 50%; height: 100%;
--ripple-animation-duration: 0.4s;
--ripple-animation-easing: cubic-bezier(.33,1,.68,1);
--ripple-animation-delay: 0s;
transition: all var(--ripple-animation-duration) var(--ripple-animation-easing) var(--ripple-animation-delay); } .next-ripple-button-v3:hover .next-ripple-button-v3__wrapper{
transform: translateY(-100%);
}
.next-ripple-button-v3:hover .next-ripple-button-v3__mask{
border-radius: var(--border-radius);
width: 100%;
}
.next-ripple-button-v3[data-from-top] .next-ripple-button-v3__bottom{
top: -100%;
}
.next-ripple-button-v3[data-from-top]:hover .next-ripple-button-v3__wrapper{
transform: translateY(100%);
}