.xn-ripple-button-v3[data-xn-hide]{
opacity: 0;
}
border-radius: var(--border-radius);
background: white; 
}
.xn-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); 
}
.xn-ripple-button-v3__title--top{
color: black; 
}
.xn-ripple-button-v3__bottom{
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.xn-ripple-button-v3__title--bottom{
position: absolute;
color: black; 
}
.xn-ripple-button-v3__mask{
background-color: #c9ff18; 
border-radius: 50%;
width: 50%; 
}
.xn-ripple-button-v3:hover .xn-ripple-button-v3__wrapper{
transform: translateY(-100%);
}
.xn-ripple-button-v3:hover .xn-ripple-button-v3__mask{
border-radius: var(--border-radius);
width: 100%;
}
.xn-ripple-button-v3[data-from-top] .xn-ripple-button-v3__bottom{
top: -100%;
}
.xn-ripple-button-v3[data-from-top]:hover .xn-ripple-button-v3__wrapper{
transform: translateY(100%);
}