←
Neumorphic Glow CTA

Neumorphic Glow CTA

Clay / Neumorphic

Authentic claymorphic and neumorphic elevated CTA button pair with glowing neon green badge depth, multi-tier elevation drop shadows, and plus-lighter bloom.

Interactive Playground & Studio

Live Controls
neumorphic-glow-cta.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Figma Emerald Pillvariant="pill" neonPreset="emerald"

1:1 Figma Master design with glowing emerald arrow badge and clay drop shadows.

UI Pirate Squirclevariant="squircle" neonPreset="uipirate"

Signature brand magma orange neumorphic clay squircle with neon glow badge.

Electric Cyan Pillvariant="pill" neonPreset="cyan"

Cyan optical underglow badge with specular bevel lip and obsidian chassis.

Neon Magenta Squirclevariant="squircle" neonPreset="magenta"

Vivid magenta bloom badge with dark cyberpunk clay squircle chassis.

Cyber Amber Pillvariant="pill" neonPreset="amber"

Warm golden amber indicator badge depth glow with dark slate body.

Neon Violet Squirclevariant="squircle" neonPreset="violet"

Ultraviolet neon arrow badge with 3D drop shadows and squircle frame.

Features & Physics

✓Authentic claymorphic multi-tier drop shadow stacks
✓Radiant glowing neon arrow indicator badge depth
✓Pill (Figma Node 14:642) & Squircle (Node 14:669) geometry
✓Interactive 60fps spring press micro-interactions

Code & Integration

Customized live with your active playground prop settings:

import { NeumorphicGlowCTA } from "@/components/NeumorphicGlowCTA";

export default function Example() {
  return (
    <NeumorphicGlowCTA
      label=""
      variant="pill"
      theme="default"
      neonPreset="emerald"
      size="md"
      onClick={() => console.log("Neumorphic Glow Clicked")}
    />
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
labelstring"Learn more"Primary button call-to-action text displayed on the cap.
variant"pill" | "squircle""pill"Physical rounded contour geometry (Node 14:642 vs 14:669).
theme"default" | "uipirate" | "dark" | "orange" | "cyberpunk" | "minimal""default"Color palette and clay surface lighting theme preset.
size"xs" | "sm" | "md" | "lg" | "xl""md"Controls button padding, font scale, and indicator dimensions.
neonPreset"emerald" | "uipirate" | "cyan" | "magenta" | "amber" | "violet" | "crimson""emerald"Neon glow preset for glowing indicator arrow circle.
onClick() => voidundefinedInteractive click callback event handler.