Skip to content

component

Orbiting Button

By Aidan Looker

Details

Summary

Animated button with orbiting particles

Description

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 .

Introduction

Animated button with orbiting particles

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600162158/148/228/309/79/15
  • All · #6173