Gravity Button

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.

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