Magnetic Button

InteractionsLive Preview

Button gently pulls toward the cursor when nearby.

Customize Preview

Select options to update the live preview, or edit the prompt directly below.

Pull Strength

Button Style

Easing

Your Prompt

abcclick to edit

Create a magnetic button that follows the cursor when hovering nearby with medium attraction. The button uses a minimal outlined design and returns to center with spring easing. Track cursor position relative to button center and apply CSS transform translate.