.xn-ripple-button-v2[data-xn-hide]{
opacity: 0;
}
.xn-ripple-button-v2{
display: flex;
white-space: nowrap;
overflow: hidden;
width: fit-content;
height: fit-content;
border-radius: 100px; 
--scale: 1.1;
--scale-animation-duration: .5s; 
--scale-animation-delay: 0s; 
--translate-animation-easing: cubic-bezier(.76,0,.24,1); 
transition: transform var(--translate-animation-duration) var(--translate-animation-easing) var(--translate-animation-delay);
--text-rotate: 90deg;
--text-translate: 15px;
--text-rotate-animation-duration: .75s; 
--text-rotate-animation-delay: .2s; 
}
.xn-ripple-button-v2__ripple-mask--top{
background: greenyellow; 
color: black; 
}
.xn-ripple-button-v2__ripple-mask--bottom{
position: absolute;
top: 100%;
background: black; 
color: white; 
}
.xn-ripple-button-v2__ripple-title--top-show,
.xn-ripple-button-v2__ripple-title--bottom-show{
position: absolute;
transform-origin: bottom center;
transform: rotateX(calc(var(--text-rotate) * -1)) translateY(var(--text-translate));
opacity: 0;
}
.xn-ripple-button-v2__ripple-title--top-hide,
.xn-ripple-button-v2__ripple-title--top-show,
.xn-ripple-button-v2__ripple-title--bottom-hide,
.xn-ripple-button-v2__ripple-title--bottom-show{
transition: 
opacity var(--text-rotate-animation-duration) var(--text-rotate-animation-easing) var(--text-rotate-animation-delay),
transform var(--text-rotate-animation-duration) var(--text-rotate-animation-easing) var(--text-rotate-animation-delay);
}
.xn-ripple-button-v2:hover{
transform: scale(var(--scale));
}
.xn-ripple-button-v2:hover .xn-ripple-button-v2__ripple-masks{
transform: translateY(-100%);
}
.xn-ripple-button-v2:hover .xn-ripple-button-v2__ripple-title--bottom-hide{
transform: rotateX(var(--text-rotate)) translateY(calc(var(--text-translate) * -1));
opacity: 0;
}
.xn-ripple-button-v2:hover .xn-ripple-button-v2__ripple-title--bottom-show{
opacity: 1;
transform: rotateX(0deg) translateY(0px);
}
.xn-ripple-button-v2:not(:hover) .xn-ripple-button-v2__ripple-title--top-hide{
transform: rotateX(var(--text-rotate)) translateY(calc(var(--text-translate) * -1));
opacity: 0;
}
.xn-ripple-button-v2:not(:hover) .xn-ripple-button-v2__ripple-title--top-show{
opacity: 1;
transform: rotateX(0deg) translateY(0px);
}
.xn-ripple-button-v2[data-from-top] .xn-ripple-button-v2__ripple-mask--bottom{
position: absolute;
top: -100%;
}
.xn-ripple-button-v2[data-from-top]:hover .xn-ripple-button-v2__ripple-masks{
transform: translateY(100%);
}