.bdt-scroll-button .bdt-scroll-button-align-icon-right {
float: right;
}
.bdt-scroll-button .bdt-scroll-button-align-icon-left {
float: left;
}
.bdt-scroll-button .bdt-scroll-button-content-wrapper svg,
.bdt-scroll-button .bdt-scroll-button-icon svg {
width: 1em;
}
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button,
.bdt-scroll-button-wrapper.bdt-multi-shadow .bdt-scroll-button,
.bdt-scroll-button-wrapper.bdt-shadow-pulse .bdt-scroll-button {
font-size: 16px;
padding: 30px;
border-radius: 60px;
line-height: 1;
}
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button i,
.bdt-scroll-button-wrapper.bdt-multi-shadow .bdt-scroll-button i,
.bdt-scroll-button-wrapper.bdt-shadow-pulse .bdt-scroll-button i,
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button svg,
.bdt-scroll-button-wrapper.bdt-multi-shadow .bdt-scroll-button svg,
.bdt-scroll-button-wrapper.bdt-shadow-pulse .bdt-scroll-button svg {
transition: all 0.3s ease-in-out;
}
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button:hover i,
.bdt-scroll-button-wrapper.bdt-multi-shadow .bdt-scroll-button:hover i,
.bdt-scroll-button-wrapper.bdt-shadow-pulse .bdt-scroll-button:hover i,
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button:hover svg,
.bdt-scroll-button-wrapper.bdt-multi-shadow .bdt-scroll-button:hover svg,
.bdt-scroll-button-wrapper.bdt-shadow-pulse .bdt-scroll-button:hover svg {
transform: scale(1.2);
}
.bdt-scroll-button-wrapper.bdt-shadow-pulse .bdt-scroll-button {
animation: shadow-pulse 2s infinite;
--box-shadow-color: rgba(129, 138, 145, 0.1);
}
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button {
position: relative;
}
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button:before,
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button:after {
content: '';
display: block;
position: absolute;
border: 1px solid #818a91;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
border-radius: 50%;
animation: line-bounce 1.5s linear infinite;
opacity: 0;
backface-visibility: hidden;
}
.bdt-scroll-button-wrapper.bdt-line-bounce .bdt-scroll-button:after {
animation-delay: .5s;
}
.bdt-scroll-button-wrapper.bdt-multi-shadow .bdt-scroll-button {
animation: multi-shadow 2s infinite;
--box-shadow-color: rgba(129, 138, 145, 0.1);
}
@keyframes shadow-pulse {
0% {
box-shadow: 0 0 0 0 var(--box-shadow-color);
}
70% {
box-shadow: 0 0 0 40px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
@keyframes line-bounce {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
@keyframes multi-shadow {
0% {
box-shadow: 0 0 0 10px var(--box-shadow-color), 0 0 0 20px var(--box-shadow-color), 0 0 0 30px var(--box-shadow-color);
}
50% {
box-shadow: 0 0 0 15px var(--box-shadow-color), 0 0 0 30px var(--box-shadow-color), 0 0 0 45px var(--box-shadow-color);
}
100% {
box-shadow: 0 0 0 10px var(--box-shadow-color), 0 0 0 20px var(--box-shadow-color), 0 0 0 30px var(--box-shadow-color);
}
}