---
title: "Magnet Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Gazi Efe · Buttons. Button that follows your cursor"
canonical: "https://framer.elliotli.dev/component/magnet-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Magnet Button

# Magnet Button

Button that follows your cursor

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

![Magnet Button preview image 1](https://framer.elliotli.dev/og/component/magnet-button/c02fbeb8fb78fb9e/1600x1200.jpg)

## Summary

Button that follows your cursor

## Description

Magnetic Button için Description (daha önce hazırladığımız metin, temiz halde):

Magnetic Button adds a tactile, premium micro-interaction to any call-to-action.

As the cursor approaches, the button is gently pulled toward it like a magnet. The label drifts a little less than the button itself, creating a subtle parallax depth, and an optional hover scale adds extra lift. The moment the cursor leaves, everything springs smoothly back to rest.

SETUP

-   Label, link and open-in-new-tab
    
-   Works with Framer's native sizing — set the layer to Fit to size by the label and padding, or Fixed for an exact size
    

STYLE

-   Font (any Google Font, with weight and size)
    
-   Text colour, background, corner radius
    
-   Padding X / Y, border width and colour
    
-   Text alignment
    

MAGNETIC FEEL

-   Strength: how strongly the button is pulled toward the cursor
    
-   Field: the distance around the button where the pull begins
    
-   Text Parallax: how much the label drifts relative to the button
    
-   Spring: looser and slower, or tight and snappy
    
-   Hover Scale: optional lift on hover
    

Fully responsive, built with clean code — no dependencies, no WebGL. Every property is editable directly in Framer.

Perfect for hero CTAs, pricing buttons, contact links and anywhere you want a button that invites a click.

Free to use — enjoy, and check out my other Framer components.

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

-   All · #6526

## Details

- **Author**: Gazi Efe
- **Published**: 2026-07-06
- **Updated**: 2026-07-23
- **Added**: 2026-07-06
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow