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