---
title: "MagneticButtons — Framer component · Best of Framer"
description: "$5.00 · Framer component · by FramerHub.io  · Buttons. Magnetic Buttons"
canonical: "https://framer.elliotli.dev/component/magneticbuttons"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/MagneticButtons

# MagneticButtons

Magnetic Buttons

[View on Framer](https://framer.com/marketplace/components/magneticbuttons/?via=elliot-li)

![MagneticButtons preview image 1](https://framer.elliotli.dev/og/component/magneticbuttons/3144282a640edb10/1600x1200.jpg)

## Summary

Magnetic Buttons

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bwwx1oux-iOlFAyVUgtG7vrMPrqwffqO30igNqb)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=MagneticButtons)

## 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.

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10932

## Details

- **Author**: FramerHub.io
- **Price**: $5.00
- **Published**: 2025-12-02
- **Updated**: 2026-04-07
- **Added**: 2025-11-08
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything