---
title: "Orbiting Button — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Aidan Looker · Buttons. Animated button with orbiting particles"
canonical: "https://framer.elliotli.dev/component/orbiting-button"
---

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

# Orbiting Button

Animated button with orbiting particles

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

![Orbiting Button preview image 1](https://framer.elliotli.dev/og/component/orbiting-button/fd18221d581ff7c5/1600x1200.jpg)

## 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.

[![](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

-   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**](mailto:contact@teampixel.com.au).

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

-   All · #8879

## Details

- **Author**: Aidan Looker
- **Price**: $6.00
- **Published**: 2026-04-09
- **Updated**: 2026-06-13
- **Added**: 2026-03-29
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything