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.
- Buttons
- gsap
- beginner
- light perf
- mobile: degraded
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1331 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 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 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.
- gsap
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 Split-Text Roll Hover Button
Luxury CTAs whose label is two stacked SplitText copies in a mask: on hover the top characters roll up and out while the second copy rises in, 0.02s apart, as the arrow slides out and its twin slides in and a hairline draws across.
- gsap
- splittext