About Shiny Grain Button
Hyperiux Shiny Button is an animated CTA button for Framer built around a rotating gradient border. A conic-gradient arc continuously sweeps around the edge at rest, then widens and brightens on hover while a soft inner glow breathes up from the bottom, all rendered in pure CSS, no images or canvas involved.
An optional masked dot-speckle texture sits beneath the border for extra grain, and every color layer, fill, label, accent, and the softer accent it eases into on hover - is set independently.
◆ Key Features
Rotating Gradient Border - A conic-gradient arc continuously sweeps around the button's border.
Speckled Dot Texture - An optional masked dot pattern adds subtle grain beneath the border.
Inner Shimmer on Hover - A soft glow breathes up from the bottom edge when hovered or focused.
Independent Color Controls - Fill, label, accent, and accent-soft colors are all set separately.
Adjustable Sweep & Ease Speed - Control the border's rotation speed and the hover transition speed independently.
Configurable Arc Width - Set how wide the bright border arc reads at rest.
Custom Corner Radius - Dial it from a full pill down to sharp corners.
Toggleable Speckle & Sheen Layers - Turn either effect on or off, plus adjust speckle opacity.
Reduced Motion Support - Respects
prefers-reduced-motion, disabling the animation and easing to a static border.Canvas & Export Safe - Renders cleanly on the Framer canvas and in static exports without animating.
◆ A Border That Never Sits Still
Shiny Button keeps a button's edge alive even at rest, so it earns attention in hero sections and pricing cards without needing a hover state to prove it's interactive.
Keywords: Shiny Button, Gradient Border Button, Animated Border, Glow Button, CTA Button, Framer Button, Conic Gradient, Shimmer Button, Button Component, Framer CTA
