ripple hover click circle expand feedback css-only hover feedback on buttons without JS expanding circle effect on interactive elements CSS-only alternative to JS ripple effects need ripple effect without any JavaScript want expanding circle feedback on hover Material-style ripple with pure CSS
Ripple CSS
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/ripple-css.json Preview
Background
Customize
Quick Start
<button class="ripple-css px-6 py-3 rounded-lg bg-indigo-600 text-white">Hover me</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 878 bytes · 43 lines
- Custom Properties
-
--ripple-css-color--ripple-css-duration - Classes
-
.ripple-css
ripple hover click circle expand feedback css-only
A CSS-only ripple that expands from the center of an element on hover. On :active, the circle grows larger with higher opacity for click confirmation. Unlike the JS-based ripple snippet, this needs zero JavaScript — the trade-off is that it always expands from center, not from click position.
Button with ripple
<button class="ripple-css rounded-xl bg-indigo-600 px-6 py-3 font-medium text-white">
Hover me
</button>Card with ripple overlay
<div class="ripple-css rounded-2xl border border-white/10 bg-white/5 p-6">
<h3 class="text-lg font-semibold text-white">Feature</h3>
<p class="mt-2 text-sm text-white/70">Interactive card with ripple feedback.</p>
</div>