---
title: "Gravity Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Aidan Looker · Buttons. What is Gravity Button?"
canonical: "https://framer.elliotli.dev/component/gravity-button"
---

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

# Gravity Button

Magnetic button with animated glow.

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

![Gravity Button preview image 1](https://framer.elliotli.dev/og/component/gravity-button/60521dfbe62a9e3c/1600x1200.jpg)

## Summary

What is Gravity Button?

## Description

## What is Gravity Button?

Gravity Button is a premium animated button component for Framer that combines magnetic hover tracking, a continuously rotating gradient border, cursor-reactive background lighting, and a staggered rolling text reveal. Designed for landing pages, hero sections, and CTAs where every interaction should feel intentional and refined. No code required — just drop, configure, and publish.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Magnetic hover effect that subtly pulls the button toward your cursor with spring-based physics
    
-   Animated gradient shimmer border with a continuously rotating conic gradient for an eye-catching edge glow
    
-   Cursor-follow liquid background that tracks mouse position inside the button for a reactive, living feel
    
-   Rolling text reveal that animates each character with a staggered slide-up wave on hover
    
-   Subtle glow pulse that breathes behind the button, adding depth and dimension
    

## Controls inside Framer

### Essentials

-   Label — set button text
    
-   Link — connect to any page or URL
    
-   New Tab — open link in a new tab
    
-   Preset — choose from Aurora, Ember, Frost, Midnight, or Custom
    
-   Icon — select from 8 built-in icons including arrows, chevron, sparkle, lightning, and star
    
-   Icon Side — position icon on left or right
    

### Colors (Custom preset)

-   Background — inner fill color
    
-   Border Start — primary gradient color
    
-   Text — label color
    
-   Glow / Border End — secondary gradient and glow color
    

### Effects

-   Magnetic Pull — control how strongly the button follows the cursor
    
-   Shimmer Speed — adjust border gradient rotation speed
    
-   Text Reveal — toggle rolling text animation on or off
    

### Sizing

-   Padding X — horizontal padding
    
-   Padding Y — vertical padding
    
-   Radius — border corner radius
    
-   Font Size — text size
    

### Typography

-   Font — select any font from your Framer project
    

## Best use cases

-   Hero section CTAs that need to stand out and create a premium first impression
    
-   SaaS landing pages where conversion-focused buttons benefit from interactive delight
    
-   Portfolio and agency sites that demand polished micro-interactions to showcase craft
    
-   Product launch pages where a single button needs to command attention
    

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au)

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

-   All · #5641

## Details

- **Author**: Aidan Looker
- **Published**: 2026-04-01
- **Updated**: 2026-06-13
- **Added**: 2026-03-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