ripple click material feedback button click feedback on buttons material design ripple effect interactive touch feedback buttons lack click feedback need material-style ripple without JS framework want visual confirmation of user interaction
Ripple
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/ripple.json
Ripple feedback
Click origin
Background
Customize
Quick Start
<button class="ripple px-6 py-3">Click me</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 691 bytes · 37 lines
- Custom Properties
-
--ripple-color--ripple-duration--ripple-x--ripple-y - Classes
-
.ripple
ripple click material feedback button
A Material Design-style ripple effect using :active pseudo-class and radial-gradient. Expands from center on click. Set --ripple-x and --ripple-y via JS for position-aware ripples.
Basic button ripple
<button class="ripple rounded-lg bg-white/10 px-6 py-3 text-white border border-white/20">
Click me
</button>Position-aware ripple (with JS)
<button class="ripple rounded-lg bg-white/10 px-6 py-3 text-white"
onclick="const r=this.getBoundingClientRect();this.style.setProperty('--ripple-x',((event.clientX-r.left)/r.width*100)+'%');this.style.setProperty('--ripple-y',((event.clientY-r.top)/r.height*100)+'%')">
Position-aware
</button>