.btns {
display: flex;
gap: 13px;
padding: 50px;
}
.ripple-btn {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: relative;
overflow: hidden;
transition: background 400ms;
color: #fff;
background-color: #3b82f6;
padding: 12px 24px;
font-size: 1rem;
outline: 0;
border: 0;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
font-weight: 500;
}
.ripple-btn.dark {
background-color: #1f2937;
}
.ripple-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
span.ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple 600ms linear;
background-color: rgba(255, 255, 255, 0.3);
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
const buttons = document.querySelectorAll(".ripple-btn");
buttons.forEach((button) => {
button.addEventListener("click", function (e) {
const circle = document.createElement("span");
const diameter = Math.max(button.clientWidth, button.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`;
circle.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`;
circle.classList.add("ripple");
const ripple = button.getElementsByClassName("ripple")[0];
if (ripple) {
ripple.remove();
}
button.appendChild(circle);
});
});
