Magnet

A button that leans toward the cursor before it is reached, and eases back when it is not.

About this tool

The oldest trick for making a call to action feel alive: the button leans toward the pointer while the pointer is anywhere near it, then eases back when the pointer leaves. Near is a rectangle you set -- the field is the button grown by a padding on every side, so a wide button stays reachable from further out horizontally, the same way it is wider. The strength dial reads as a percentage of the cursor's own offset rather than as a divisor, so turning it up moves the button more, and the travel is capped in pixels: no combination of sliders slides it out of the layout, and because the cap is applied to the whole vector rather than to each axis, a diagonal approach cannot reach further than a straight one. Attract and release are separate durations, because they are separate gestures -- the pull tracks a hand, the return does not. Pointer samples are coalesced into one animation frame, so a 1000Hz mouse does not do eight times the work the screen can show, and the offset is measured against a wrapper that never moves, so a still cursor cannot walk the button away. Reduced motion and a disabled switch both park it at rest, and the button keeps a real focus ring for everyone who never touches a pointer. Wrap it around anything -- a CTA, a logo, an icon. Edit it, then export one self-contained HTML file with no dependencies.

In collections: CSS Buttons & Animated Button Effects Micro Interactions: UI Animation Examples

Guide: Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS All tools

Copy

Label

Magnet

Field padding px

Pull %

Max travel px

Disabled

Button

Face colour

Text colour

Width px

Height px

Radius px

Text size px

Motion

Attract ms

Release ms

Preview

State

auto rest pulled

Stage

Stage colour

#ffffff