Metallic Button

Overview

Metallic Button turns a simple action into a refined surface.

The component uses a dark rounded base, metallic rim, specular highlights, and soft moving light to make the button feel physically polished. The label stays quiet and readable while the surface carries the premium treatment.

Use Metallic Button when the CTA belongs inside a high-craft interface: luxury products, creative studios, premium SaaS pages, AI launches, design portfolios, waitlists, product previews, and campaign pages with a darker, more cinematic visual system.

The page job is materiality. The button should feel like an object with finish, depth, and touch response. The effect should make the action feel considered, not make the interface look like it ordered chrome from a plugin marketplace and used the whole bottle.

Usage Code

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

Example Production Use Case

A premium agency homepage can use Metallic Button as the primary inquiry CTA inside a dark hero. The chrome edge catches attention, the surface feels tactile, and the label stays calm enough for the page to retain a refined tone.

The outcome is confidence. The CTA feels more valuable without shouting at the visitor.

A product page can use the same button for paid templates, early access, booking flows, or high-intent actions where the interface should feel polished and deliberate.

Best Used For

• Premium hero CTAs and conversion sections.
• Luxury, fashion, creative studio, AI, cyber, and high-craft SaaS pages.
• Portfolio contact buttons and launch-page actions.
• Dark UI environments where chrome highlights create clear separation.
• Product preview, request access, and paid purchase buttons.

Not For

Not for low-priority links, dense dashboards, destructive actions, form field controls, documentation navigation, or pages that need a plain utility interface.

Not for every CTA. Metallic treatment works because it feels rare. Use it everywhere and the page becomes a showroom for button anxiety.

Not for tiny buttons where the material detail cannot be seen.

Performance Budget

Keep the highlight system lightweight. Prefer CSS gradients, shadows, transforms, and opacity over heavy filters or large blurred layers. Avoid running pointer updates when the button is inactive, offscreen, or on touch devices.

Keep shadow and blur values controlled. Metallic surfaces need crispness. Too much glow turns chrome into fog.

Accessibility and Mobile

Use real button or anchor semantics, visible focus states, sufficient contrast, and clear labels. Provide disabled and loading states that remain understandable without relying on color alone.

On mobile, use a stable highlight or simplified pressed state. Pointer-follow reflections should be disabled or simplified on touch devices. For reduced motion, freeze reflection movement, remove hover travel, and keep a static metallic surface.

Common Mistakes

• Making the label too low-contrast.
• Using metallic shine without clear button boundaries.
• Forgetting keyboard focus styles.
• Applying chrome treatment to too many actions.
• Letting pointer-follow highlights block clicks.
• Making the hover state look like loading.
• Using a premium material style on a page with no matching visual system.