---
title: "Magnetic Follow — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. About Magnetic Follow Button is a social follow CTA with a real magnetic interaction — on hover, the button physically follows…"
canonical: "https://framer.elliotli.dev/component/magnetic-follow"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Magnetic Follow

# Magnetic Follow

A follow button chases your cursor

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

![Magnetic Follow preview image 1](https://framer.elliotli.dev/og/component/magnetic-follow/0a3dc64bdd9eb404/1600x1200.jpg)

## Summary

About Magnetic Follow Button is a social follow CTA with a real magnetic interaction — on hover, the button physically follows your cursor's movement, pulling toward it like a…

## Description

About

Magnetic Follow Button is a social follow CTA with a real magnetic interaction — on hover, the button physically follows your cursor's movement, pulling toward it like a magnet and snapping back smoothly when the cursor leaves. It is the kind of micro-interaction that makes visitors stop scrolling.

What it does

The button tracks your cursor position in real time and shifts its X and Y position to follow the mouse within its hover zone, creating a tactile magnetic pull effect. On hover the background darkens slightly to confirm the interaction, and the button returns to its original position with a spring animation when the cursor exits.

What you can customize

\[Image: MagneticFollowButton properties panel\]

Full control from the Framer panel — no code needed:

\- Text — button label (e.g. "Follow @Karim Saif")

\- Link URL — destination link (e.g. your X profile)

\- Font — Poppins by default, change to any font

\- Font Size — default 16px

\- Text Color — default #FFFFFF

\- Button Bg — resting background color, default #2563EB

\- Hover Bg — background on hover, default #1D4ED8

\- Outline Color — border/outline color, default #FFFFFF at 40% opacity

\- Radius — border radius, default 8px

\- Padding H — horizontal padding, default 22px

\- Padding V — vertical padding, default 16px

Great for (examples)

Use it anywhere you want a CTA that actually gets clicked:

\* social follow buttons (X, Instagram, LinkedIn)

\* hero sections on personal brand and portfolio sites

\* creator and influencer landing pages

\* newsletter signup CTAs

\* agency and studio websites

\* profile or about pages

\* Framer template previews

Share your build

If you ship something cool with it, post it on X and tag me @karimsaif0 ([https://x.com/karimsaif0](https://x.com/karimsaif0)), or send it over. I would love to see what you create.

Need help?

Questions or feedback? Reach me anytime: [karimsaif010@gmail.com](mailto:karimsaif010@gmail.com) or on X @karimsaif0 ([https://x.com/karimsaif0](https://x.com/karimsaif0))

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

-   All · #7047

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-24
- **Updated**: 2026-07-24
- **Added**: 2026-07-24
- **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