Back

Button Components

Connect Wallet Button

Compact cyan wallet CTA with a dark dotted-arrow action block and tactile motion.

View

Glass Button & Card

Frosted CTA using the extracted gradient-border, blur, shadow, and noise treatment.

View

Pointerdown Cursor Button

Custom cursor button with a pressed-state pointerdown counterpart.

View

Ultramock Metallic Button

Chrome subscription CTA with pointer-driven sheen and squircle surface.

View

Slide To Convert Button

Swipe-to-confirm conversion pill with animated lucide arrows.

View

Track Status Button

Glossy purple Track Status CTA with raised white text.

View

Fix Action Buttons

Stacked Apply Fix and Preview Fix actions on a dark repair surface.

View

Glossy Icon Buttons

Purple, black, and green glossy icon buttons from the stacked reference.

View

Lime Alert Rule Button

Bright lime Add Alert Rule CTA with a soft raised edge.

View

Preview Deploy Buttons

Paired Preview and Deploy buttons with lifted white and dark treatments.

View

Earn Button

Glossy green Earn pill with a filled rewards mark.

View

Buy Now Glow Button

Cyan glowing Buy Now CTA from the dark mobile finance screenshot.

View

Orange Add View Button

Supplied orange Add View button with layered shadows.

View

FUN Loading Button

Animated transaction button with processing and completed states.

View

Light Gradient Button

Light gray hug button with a subtle Figma-style gradient.

View

Figma Properties Button

Dark gradient button built from the shared Figma shadow properties.

View

Performance Button

Dark Subscribe pill recreated from performance.dev.

View

Component Code (Next.js)

import Link from "next/link";
import BuyNowGlowButton from "@/components/BuyNowGlowButton";
import ConnectWalletButton from "@/components/ConnectWalletButton";
import EarnButton from "@/components/EarnButton";
import FigmaPropertiesButton from "@/components/FigmaPropertiesButton";
import FixActionButtons from "@/components/FixActionButtons";
import FunLoadingButton from "@/components/FunLoadingButton";
import GlassButton from "@/components/GlassButton";
import GlossyIconButtonStack from "@/components/GlossyIconButtons";
import LightGradientButton from "@/components/LightGradientButton";
import LimeAlertRuleButton from "@/components/LimeAlertRuleButton";
import { OrangeAddViewButton } from "@/components/OrangeAddViewButton";
import PerformanceButton from "@/components/PerformanceButton";
import PointerdownCursorButton from "@/components/PointerdownCursorButton";
import PreviewDeployButtons from "@/components/PreviewDeployButtons";
import SlideToConvertButton from "@/components/SlideToConvertButton";
import TrackStatusButton from "@/components/TrackStatusButton";
import UltramockMetallicButton from "@/components/UltramockMetallicButton";

export default function ButtonOverview() {
  return (
    <section>
      <ConnectWalletButton />
      <PointerdownCursorButton>Pointer Down</PointerdownCursorButton>
      <UltramockMetallicButton />
      <SlideToConvertButton />
      <TrackStatusButton />
      <FixActionButtons />
      <GlassButton>Launch stack</GlassButton>
      <GlossyIconButtonStack />
      <LimeAlertRuleButton />
      <PreviewDeployButtons />
      <EarnButton />
      <BuyNowGlowButton />
      <OrangeAddViewButton />
      <FunLoadingButton />
      <LightGradientButton>Continue</LightGradientButton>
      <FigmaPropertiesButton>Continue</FigmaPropertiesButton>
      <PerformanceButton>Subscribe</PerformanceButton>
      <Link href="/glossy-icon-buttons" target="_blank" rel="noopener noreferrer">
        View
      </Link>
    </section>
  );
}

Claude / Codex Prompt

Create a Next.js page that previews every button component in a responsive grid:
- Show all button demos in parallel cards rather than a stacked list.
- Include a text "View" link/button on each card.
- Each View link opens that individual button route in a new tab.
- Keep previews scaled safely inside their containers and preserve real button semantics for the components.