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), or send it over. I would love to see what you create.
Need help?
Questions or feedback? Reach me anytime: karimsaif010@gmail.com or on X @karimsaif0 (https://x.com/karimsaif0)
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), or send it over. I would love to see what you create.
Need help?
Questions or feedback? Reach me anytime: karimsaif010@gmail.com or on X @karimsaif0 (https://x.com/karimsaif0)
