Orbiting Button — Animated button with orbiting particles

What is Orbit Button?

Orbit Button is a high-end animated button component built for Framer. It features a subtle light flare that continuously travels around the button outline, ethereal particles that orbit on hover, a staggered character lift animation, and a soft click ripple. Designed for landing pages, hero sections, and premium product sites where every interaction needs to feel polished and intentional.

Core Features

• Traveling border flare that continuously orbits the button outline with a smooth, even glow across all edges

• Orbiting particles that appear on hover and float around the button perimeter at staggered speeds

• Staggered character lift where each letter rises individually on hover for a refined text animation

• Soft luminous click ripple that expands from the cursor position on press

• Cursor-following inner glow that subtly tracks mouse position for added depth

• Five premium colour presets plus a fully custom colour mode

Controls inside Framer

Essentials

• Label — set the button text

• Link — assign any URL or page link

• New Tab — open the link in a new tab (shown only when a link is set)

• Preset — choose from Obsidian, Sapphire, Rose, Emerald, Amber, or Custom

• Icon — select from 8 built-in icons including Arrow, Chevron, Sparkle, Lightning, and Star

• Icon Side — position the icon on the left or right (shown only when an icon is selected)

Colors (Custom preset only)

• Background — button fill colour

• Accent Start — primary glow and flare colour

• Accent End — secondary glow and particle colour

• Text — label and icon colour

Effects

• Particles — number of orbiting dots visible on hover (0 to 10)

• Orbit Speed — speed of the border flare and particle orbits (Slow, Medium, Fast)

• Click Ripple — toggle the luminous ripple effect on click

• Text Lift — toggle the staggered character lift animation on hover

Sizing

• Padding X — horizontal padding

• Padding Y — vertical padding

• Radius — border radius

• Font Size — text size

Font

• Font — choose any font family and weight from your project

Best use cases

• Hero section CTAs on SaaS, startup, and agency landing pages

• Pricing page action buttons that need to stand out and convert

• Product launch pages where premium feel drives user trust

• Dark-themed portfolios and creative studio sites

Ship CTAs that feel alive. One component, five presets, zero friction.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.