.nb-ripple-button-v7{
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
--duration: attr(data-duration);
}
.nb-ripple-button-v7__text{
position: relative;
z-index: 2;
}
.nb-ripple-button-v7::before{
content: attr(data-text);
opacity: 0;
position: absolute;
z-index: 1;
}
.nb-ripple-button-v7:hover .nb-ripple-button-v7__text{
opacity: 0;
transition: all var(--text-translate-duration) var(--text-translate-ease);
}
.nb-ripple-button-v7[data-text-to="bottom"]::before{
transform: translateY(calc(var(--text-translate) * -1));
}
.nb-ripple-button-v7[data-text-to="bottom"]:hover .nb-ripple-button-v7__text{
transform: translateY(var(--text-translate));
}
.nb-ripple-button-v7[data-text-to="top"]::before{
transform: translateY(var(--text-translate));
}
.nb-ripple-button-v7[data-text-to="top"]:hover .nb-ripple-button-v7__text{
transform: translateY(calc(var(--text-translate) * -1));
}
.nb-ripple-button-v7:hover::before{
opacity: 1;
transform: translateY(0);
transition: all calc(var(--text-translate-duration) * 1.5) var(--text-translate-ease);
}
.nb-ripple-button-v7__mask{
position: absolute;    
border-radius: 100%;
width: 50%;
height: 100%;
transition: all var(--ripple-duration) var(--ripple-ease);
}
.nb-ripple-button-v7:hover .nb-ripple-button-v7__mask{
border-radius: 0%;
width: 150%;
transition: unset;
}
.nb-ripple-button-v7[data-mask-to="top"] .nb-ripple-button-v7__mask{
top: -100%;
}
.nb-ripple-button-v7[data-mask-to="top"]:hover .nb-ripple-button-v7__mask{
top: 0;
}
.nb-ripple-button-v7[data-mask-to="bottom"] .nb-ripple-button-v7__mask{
top: 100%;
}
.nb-ripple-button-v7[data-mask-to="bottom"]:hover .nb-ripple-button-v7__mask{
top: 0;
}.bc-back-to-top {
position: fixed;
right: 50px; bottom: 50px; height: 46px;
width: 46px;
cursor: pointer;
border-radius: 50px;
box-shadow: inset  0 0 0 2px;
color: rgba(255, 255, 255, 0.2); background-color: none; z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px) !important;
transition-duration: 200ms; transition-timing-function: linear; display: flex;
justify-content: center;
align-items: center;
}
.bc-back-to-top__active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0) !important;
}
.bc-back-to-top__arrow-svg {
position: absolute;
fill: grey;
width: 25px;
height: 100%;
cursor: pointer;
display: block;
z-index: 1;
}
.bc-back-to-top__circle-path {
fill: none;
stroke: grey; stroke-width: 5;
box-sizing:border-box;
}
.bc-back-to-top__to-hide{
opacity: 0;
}