Magnetic button

Make it fit your project.

Measure the pointer relative to the button center. Clamp translation to 8px and ease back to zero when the pointer leaves. Keep the hit area fixed, use transform only on an inner surface, and preserve a visible keyboard focus ring.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Measure the pointer relative to the button center. Clamp translation to 8px and ease back to zero when the pointer leaves. Keep the hit area fixed, use transform only on an inner surface, and preserve a visible keyboard focus ring.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Do not move the actual hit target. Touch and reduced-motion users get a stationary button.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.