Shiny Button

Overview

Shiny Button gives a standard CTA a controlled light pass.

The button uses glow, gradient movement, surface shine, and soft edge illumination to create a polished interaction state. The label remains stable while the visual surface moves around it, so the user still reads the action clearly.

Use Shiny Button when a page needs one CTA to feel more desirable than the surrounding interface. It works for SaaS pricing pages, account upgrade flows, premium-access prompts, product launches, checkout starts, waitlist buttons, and hero sections where the primary action needs a stronger visual cue.

The page job is conversion emphasis. The shine should make the button feel active and intentional. It should not make the user wonder whether the CTA is clickable, loading, disabled, or auditioning for a sci-fi dashboard.

Usage Code

1// Built using Hyperiux Vault: https://vault.hyperiux.com2 3import ShinyButton from "@/components/effects/shiny-button";4 5export default function Page() {6    return (7        <>8        <div className="h-screen w-screen flex items-center justify-center relative">9                  <ShinyButton />10</div>11        </>12    13    );14}

Example Production Use Case

A SaaS pricing page can use Shiny Button on the paid-plan CTA. The surrounding interface stays calm, while the main action carries a subtle animated gloss that reinforces priority.

The outcome is hierarchy. Visitors understand which button matters most without the page needing another arrow, badge, or desperate “most popular” treatment trying to carry the whole conversion path.

A product launch page can use the same component for a waitlist or early-access CTA where the action should feel alive but still trustworthy.

Best Used For

• Primary CTAs in hero sections.
• Pricing, checkout, upgrade, and premium-access actions.
• Launch pages where one action needs stronger pull.
• SaaS, AI, developer-tool, and digital-product interfaces.
• Dark UI sections where glow and shine can create clean contrast.

Not For

Not for every button on the page.

Not for destructive actions, legal confirmations, subtle secondary links, dense dashboards, form controls, or navigation items that should stay quiet.

Not for CTAs with unclear copy. Shine can attract attention, but it cannot make “Click here” worth clicking.

Performance Budget

Keep the visual layer lightweight. Prefer CSS gradients, masks, opacity, and transform over heavy filters or constant JavaScript-driven animation. Avoid running pointer calculations when the button is offscreen or inactive.

Limit glow blur and animated texture density. A CTA should feel polished, not like it brought its own rendering engine to a checkout flow.

Accessibility and Mobile

Use real button or anchor semantics, readable labels, visible focus states, and sufficient contrast. The shine should never reduce label clarity.

On touch devices, use a stable active or hover-safe visual state instead of relying on cursor position. For reduced motion, freeze the shine, remove continuous movement, or show a static polished surface.

Common Mistakes

• Applying shiny treatment to every CTA.
• Letting the animated surface reduce label readability.
• Using divs instead of real buttons or anchors.
• Forgetting focus-visible states.
• Making the shine look like a loading indicator.
• Running pointer-driven animation on touch devices without fallback.
• Styling a weak CTA instead of improving the action copy.