Magnetic Pull Button

Magnetic Pull Button

A button that leans toward the cursor as it gets close, then springs back when the cursor moves away. The label moves a little further than the button, which adds a subtle sense of depth.

Customizable Properties

Everything is set from the property panel, with no code editing.

- Text, Link and New Tab

- Strength: how far the button follows the cursor

- Label Pull: how much extra the label moves

- Range: how close the cursor must be before the pull starts

- Spring: stiffness and damping of the return motion

- Font, Text and Fill colors, with separate hover colors

- Radius, Padding and Border

Details

The pull only runs for mouse pointers, so on touch screens it behaves like a normal button. Visitors who prefer reduced motion get a static button.

About The Code

This is a code component, but no coding is needed. To keep quality consistent and deliver updates, unlinking is not available, so the source code cannot be viewed or edited.

More Resources

More components by Joviseo: Scroll To Top Ring, Reading Progress Bar and Text Scramble Button. https://joviseo.vercel.app