Back to Dictionary
Scroll & Navigation
●●○Customize
Magnetic Snap Button
When the mouse gets close to this button, the entire button (and its text) physically pulls towards the cursor, as if magnetized. It snaps back playfully when the mouse leaves.
Live Demo
Magnetic Snapping
What It Is
When the mouse gets close to this button, the entire button (and its text) physically pulls towards the cursor, as if magnetized. It snaps back playfully when the mouse leaves.
✓When to Use
- Minimalist portfolio navigation
- Hamburger menu icons
- Floating Action Buttons (FABs)
✕When NOT to Use
- Dense forms
- Standard native-feeling applications
Configuration Tips
- 01Map mouse coordinates to X/Y transforms within a specific radius, divided by a friction coefficient (e.g. / 2)
You've Seen It In
Awwwards SitesCreative Portfolios
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Write a React component for a magnetic button. As the mouse moves over it, the x and y transform of the button should follow the cursor slightly.
Code Example (Tailwind CSS)
export function MagneticButtonDemo() {}