Six interaction systems
Choose magnetic pull, liquid fill, light shimmer, tactile lift, orbiting energy, or an editorial split-arrow treatment.
Interaction & response
Button Motion
Make the smallest interaction feel considered. Design hover, press, magnetic, fill, and shimmer behaviors while testing the real control under your pointer.
Interactive component / hover + pressMove with intention.
Hover, press, and move your pointer across the buttonTactile by design
Button motion that communicates, not distracts.
A good button confirms intent before the click. Build responsive calls to action with clear focus states, deliberate easing, and output that works without an animation library.
Test the real behavior
Hover, move, focus, and press the actual button in the preview rather than judging a non-interactive mockup.
Portable code
Copy the complete HTML, CSS, and minimal JavaScript or download a standalone page with no package dependency.
Three-step workflow
How to use the Button Motion studio
- Choose a response
Start with a preset that fits the tone, then test it directly with pointer and keyboard focus.
- Tune the tactility
Balance size, corner shape, response time, pull strength, depth, type, and palette.
- Ship the interaction
Copy a paste-ready fragment or download a complete HTML page for handoff and prototyping.
Questions, answered.
Does magnetic motion work on touch screens?
The export only applies pointer attraction to mouse and pen input. Touch keeps a stable target and still receives the press state.
Is keyboard focus included?
Yes. Exported buttons use a native button element and a high-contrast focus-visible outline.
Do I need GSAP or another library?
No. Every behavior uses scoped CSS and, for magnetic tracking, a short dependency-free script.
What happens when reduced motion is enabled?
Continuous and sweeping animation is removed, while the button remains legible, focusable, and fully clickable.