Ripple Wave
A ripple circle radiates outward from the exact point of your click, like Material Design.
Ripple Wave the 14th of 21 designs in the 21 CSS Button Hover Effects collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="bhe-14__btn">Click Me</button>
.bhe-14__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-14__btn {
position: relative;
overflow: hidden;
}
.bhe-14__ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.32);
transform: scale(0);
animation: rwave 0.7s linear;
pointer-events: none;
}
@keyframes rwave {
to {
transform: scale(4);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.bhe-14__btn,
.bhe-14__btn * {
animation: none !important;
}
}
document.querySelectorAll(".bhe-14__btn").forEach(function (btn) {
btn.addEventListener("click", function (e) {
const c = document.createElement("span");
const d = Math.max(btn.offsetWidth, btn.offsetHeight);
const r = btn.getBoundingClientRect();
c.className = "bhe-14__ripple";
c.style.cssText =
"width:" + d + "px;height:" + d + "px;" +
"left:" + (e.clientX - r.left - d / 2) + "px;" +
"top:" + (e.clientY - r.top - d / 2) + "px";
btn.appendChild(c);
c.addEventListener("animationend", function () { c.remove(); });
});
});