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.
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
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
Background — inner fill color
Border Start — primary gradient color
Text — label color
Glow / Border End — secondary gradient and glow color
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
Padding X — horizontal padding
Padding Y — vertical padding
Radius — border corner radius
Font Size — text size
Font — select any font from your Framer project
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
We design and build custom Framer components. Get in touch at contact@teampixel.com.au
Aidan Looker
