Block
Magnetic Button
Add subtle magnetic attraction to buttons on hover and focus. The smallest possible signal that a portfolio was made by hand, not assembled.
GET THIS BLOCK - FREE
Interaction Block · Block 09 / 09
← All blocksMAGNETIC BUTTON / LIVE
data-strength="0.5" · data-radius="120"
Recreated for the web · ships as a native WordPress block
What you can control
| Attribute | What it does | Default |
|---|---|---|
data-strength | Magnetic pull strength as a decimal multiplier | 0.5 |
data-radius | Activation radius around the button in pixels | 120 |
data-easing | CSS easing function for the return animation | cubic-bezier(0.34, 1.56, 0.64, 1) |
Accessible: Magnetic Button respects prefers-reduced-motion and is fully keyboard-operable. The effect is disabled for pointer-coarse devices and reduced-motion users.