Ripple
No library Beginner
A rose-colored ripple circle expands from the exact click point and fades out — Material Design's satisfying click feedback pattern. Pure CSS animation, no dependencies.
A rose-colored ripple circle expands from the exact click point and fades out — Material Design's satisfying click feedback pattern. Pure CSS animation, no dependencies.
Goal: Create a "Ripple" button animation.
Visual behavior: On click, a small circle (10×10px) spawns at the exact click coordinates inside the button, then scales up to 30× its size while fading to opacity 0 over ~600ms. The effect looks like a ripple expanding from the tap point. Multiple clicks can overlap. The button itself has a dark background.
Technique: React useState stores an array of ripple objects (id, x, y). On click, compute position relative to the button rect, append a ripple entry, then remove it after 620ms. Each ripple is an absolutely positioned span with border-radius 50%, a rose/pink background, and a scale + opacity CSS keyframe animation. The button uses position: relative and overflow: hidden to clip ripples.
Accessibility: role="button" is implicit. Animation skipped (opacity 0 immediately) under prefers-reduced-motion. Button still responds normally to clicks.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.