Pointer-Origin Ripple Button
Three pill buttons flood with colour from the exact pointer position on hover: a clip-path circle grows from the entry point and the label inverts as the edge passes it; clicks add a translucent burst and a press squash.
- Buttons
- gsap
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1181 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Animated Gradient Border Button
Three button variants share a 1px conic-gradient ring that orbits forever via a GSAP-tweened --angle; hovering triples the orbit speed, sweeps a highlight across the face and rolls the label up to a second copy. Active presses scale to 0.97.
- gsap
- css-only
light Button Fill Sweep
Four buttons on a membership page: on hover or focus a slanted lime pane sweeps across in 0.55s power3.out, carrying a counter-moving copy of the label so the text inverts exactly under the fill, then leaves through the far edge.
- gsap
light Magnetic Button
Three pill buttons attract toward the pointer inside an invisible radius, their labels leading slightly for parallax, flood with colour from the entry point, and spring back with an elastic snap on leave.
- gsap
light Click Ripple
Buttons, list rows, chips, icon buttons and a FAB each spawn a translucent circle of ink at the exact press point (keyboard: the centre); it scales to the farthest corner in 0.55s, holds while pressed, then fades out and removes itself.
- gsap