GleamButton

GleamButton is an animated call-to-action button for Framer with a rotating conic-gradient ring, a soft breathing glow, and a diagonal highlight sweep on hover, built as a real, crawlable link when you set one.

Unlike a plain click handler, GleamButton renders as a genuine anchor tag when linked, so middle-click, right-click, and cmd-click all work correctly, and search engines can crawl it like any other link.

WHAT IT DOES Set your label, colors, and optional link, and GleamButton handles the rest. A thin conic-gradient ring spins continuously around the border, a soft glow breathes beneath the label, and a diagonal highlight sweeps across on hover or focus. Reduced-motion preference disables the animation automatically.

KEY FEATURES

• Rotating conic-gradient ring border, adjustable thickness and speed

• Breathing glow animation beneath the label

• Diagonal highlight sweep on hover and keyboard focus

• Renders as a real anchor tag when linked, full browser-native link behavior

• Automatic reduced-motion fallback for accessibility

• Disabled state with reduced opacity and blocked interaction

• Full typography, color, and padding controls

• Adjustable corner radius, from sharp to full pill

• Open-in-new-tab toggle for outbound links

• Zero third-party dependencies beyond Framer Motion

WHY IT WORKS

Most animated CTA buttons in this style use a JavaScript click handler even when linking out, which breaks native browser behavior like middle-click and right-click. GleamButton keeps the same premium visual effect while staying a real link underneath.

PERFECT FOR

SaaS landing page primary actions, product launch pages, waitlist and signup CTAs, and any Framer site that wants an animated button that behaves like a proper link.

WHAT'S INCLUDED

A single drop-in code component. Set your text, colors, and link, then tune ring speed, thickness, and typography through property controls.

Drop it in, set your link, and let the glow do the converting.