Magnetic Buttons

Interactive Buttons That React to Your Cursor

Add magnetic hover effects to your CTAs. Buttons smoothly follow the cursor and animate on hover—perfect for portfolio sites, agencies, and modern SaaS landing pages.

Four ready-to-use styles with full customization. No code, pure interaction.

Features

Four Premium Styles Rounded Rectangle, Circle Fill, Pill Fill, and Circle Outline—each with unique hover animations and fill effects.

Magnetic Cursor Effect Buttons smoothly follow your cursor within a customizable distance. Adjust magnetic strength, smoothness, and activation threshold.

Hover Animations Built-in fill animations, border transitions, and color shifts that create polished micro-interactions.

Full Customization Control size, colors, typography, borders, and spacing. Set different states for default and hover. Or connect your own custom component.

Text Counter-Movement Text subtly moves opposite to the button for added depth and polish during magnetic interaction.

Use Cases

Hero CTAs — Make primary buttons unforgettable with magnetic interaction that draws attention

Portfolio Sites — Add premium feel to "View Project" or "Contact" buttons

Agency Websites — Demonstrate interaction design expertise with sophisticated button effects

SaaS Landing Pages — Increase conversions with engaging CTAs that feel modern and polished

Product Pages — Make "Add to Cart" or "Learn More" buttons stand out with smooth magnetic hover

How to Use

Installation

After purchasing from FramerHub:

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

Everything you need is in Framer's properties panel:

Button Style

• Choose from 4 presets: Rounded Rectangle, Circle Fill, Pill Fill, Circle Outline
• Or switch to Custom mode and connect your own component

Magnetic Effect

• Magnetic Strength: How strongly button follows cursor
• Distance Threshold: How close cursor must be to activate
• Smoothness: Animation easing and responsiveness
• Text Counter-Move: Subtle text movement for depth

Appearance

• Button text and typography (font, size, weight)
• Dimensions (width, height, padding)
• Colors for background, text, and borders
• Border radius and thickness

Hover States

• Different colors for hover background, text, and border
• Fill animation color (for Circle Fill and Pill Fill styles)

Actions

• Add a link URL for navigation
• Toggle disabled state to turn off interaction

Quick Tips

Magnetic Strength — Start with default (0.3) and adjust. Higher values = stronger pull

Distance Threshold — Use 0.7 for desktop. Reduce to 0.5 for smaller buttons

Visual Hierarchy — Use magnetic effect on primary CTAs only. Too many magnetic buttons compete for attention

Dark Backgrounds — Circle Fill and Pill Fill styles work best on dark sections with light text

Custom Components — Connect frames, text, or stacks in Custom mode for unlimited design freedom

License

Single Use License — Use in unlimited client projects with full commercial rights. No redistribution.

Why Designers Love This

Four polished styles mean you start with something premium, then customize colors, sizing, and hover states through Framer's properties panel. No animation timeline complexity—just copy, paste, and adjust.

Perfect for agencies adding micro-interactions to client sites and freelancers who want buttons that feel crafted, not generic.