.fab-container {
position: fixed;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 15px;
z-index: 9999;
}
.fab-container-right {
right: 20px;
}
.fab-container-left {
left: 20px;
} .fab-button {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
position: relative; }
.fab-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
} .fab-button img {
width: 28px;
height: 28px;
transition: transform 0.2s ease-in-out;
} #fab-scroll-top {
display: none;
} .fab-ripple::before,
.fab-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-radius: 50%;
background-color: inherit; z-index: -1;
animation: sonar-effect 2s infinite ease-out;
}
.fab-ripple::after {
animation-delay: 0.7s; }
@keyframes sonar-effect {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(2.2);
opacity: 0;
}
}