---
title: "Shooting Star Button — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ekaterina Pavlova · Buttons. Customizable animation, colors etc"
canonical: "https://framer.elliotli.dev/component/shooting-star-button"
---

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

# Shooting Star Button

Customizable animation, colors etc

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

![Shooting Star Button preview image 1](https://framer.elliotli.dev/og/component/shooting-star-button/49877256588f8d41/1600x1200.jpg)

## Summary

Customizable animation, colors etc

## Description

Magic Star Button turns an ordinary call-to-action into a moment. On hover, a star launches from behind the button, arcs over the top and dissolves on the other side, leaving a trail of glowing dust in its wake.

Built as a single Framer code component. No dependencies, no external assets.

WHAT YOU CAN CHANGE

• Label, font, size, weight, letter spacing

• Background gradient, border, radius, padding, text color

• Hover border, hover text and glow — or turn the glow off completely

• Star shape: sparkle, 5-point, burst, diamond, dot, or your own SVG path

• Star color, size, glow and spin

• Trail color, size, density, spread and fade

• Trigger: hover, click, hover + click, or an automatic loop

• Arc height, arc width and flight duration

BUILT PROPERLY

• Renders a real <button> or <a> — keyboard and screen-reader friendly

• Respects prefers-reduced-motion

• 64-node particle pool and a single animation frame loop, no React re-renders

• Auto-sizes to its content, or stretch it to any fixed size

• Plays once on the Framer canvas so you can preview it while designing

GOOD FOR

Landing page hero CTAs, pricing pages, waitlist and launch pages, portfolio sites, anything premium, magical or celebratory.

Note: the star flies above the button's bounds. If you place it inside a frame with clipping enabled, lower the Arc Height or turn clipping off.

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

-   All · #2001

## Details

- **Author**: Ekaterina Pavlova
- **Price**: $5.00
- **Published**: 2026-08-17
- **Updated**: 2026-08-18
- **Added**: 2026-08-17
- **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