---
title: "Magnetic Buttons"
canonical_url: "https://framerhub.io/components/magnetic-buttons"
last_updated: "2026-06-15T14:46:30.161Z"
---

## Magnetic Buttons

Create interactive buttons that magnetically follow your cursor with smooth, physics-based motion. Choose from 4 pre-styled presets or connect your own custom component to add the magnetic effect.

## Features

**Physics-Based Motion**
Smooth, natural cursor-following with customizable magnetic strength and smoothness.

**4 Button Presets**
Rounded Rectangle, Circle Fill, Pill Fill, and Circle Outline styles ready to use.

**Custom Component Support**
Connect any Framer component to make it magnetic - icons, cards, or complex designs.

**Text Counter-Movement**
Adds depth by moving text in the opposite direction of the button.

## Use Cases

**Call-to-Action Buttons** — Make CTAs more engaging and interactive.

**Navigation Elements** — Create memorable navigation experiences.

**Portfolio Showcases** — Highlight clickable elements with magnetic effects.

**Landing Pages** — Add premium interactivity to key conversion points.

![Magnetic Buttons Preview](/framerhub/img/components/control/magnetic-buttons.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Magnetic Buttons in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Type Selection**

- Default: Use pre-styled button presets
- Custom: Connect your own Framer component

**Magnetic Behavior**

- Magnetic Strength: How strongly the button follows cursor (0-1)
- Distance Threshold: Activation range for the effect
- Smoothness: Animation fluidity (lower = smoother)
- Text Counter Move: Depth effect intensity

**Button Styles**
Each preset has full customization for dimensions, typography, colors, and hover states.

### Quick Tips

**Strength Settings** — Start with 0.3 for subtle effect. Use 0.5-0.8 for more dramatic following.

**Smoothness** — Values around 0.1 provide the best balance of responsiveness and fluidity.

**Custom Mode** — When connecting custom components, ensure they have visible boundaries for best effect.

**Hover States** — Customize hover colors to provide clear feedback when the magnetic effect activates.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Turn ordinary buttons into engaging interactive elements. The magnetic effect adds a layer of polish and interactivity that users remember, making your interface feel premium and alive.

---