←
Elevated Underglow 3D Button

Elevated Underglow 3D Button

Tactile Elevation

Interactive 3D tactile pill button that elevates 13px on hover to reveal a glowing electric blue extruded sub-chassis, bottom reflection rim, and realistic clay elevation physics.

Interactive Playground & Studio

Live Controls
elevated-underglow-cta.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Figma Electric Bluetheme="figma"

1:1 Figma Master design with blue extruded sub-chassis.

UI Pirate Magmatheme="uipirate"

Vibrant signature brand magma orange glow.

Neon Emeraldtheme="emerald"

High-tech reactor matrix green elevation chassis.

Cyber Violettheme="violet"

Sleek neon ultraviolet sub-chassis underglow.

Crimson Embertheme="crimson"

Punchy ruby red extruded sub-surface illumination.

Dark Obsidiantheme="dark"

Monochrome stealth obsidian cap with pure white glow.

Features & Physics

✓13px dynamic vertical spring elevation on hover
✓Illuminated electric blue sub-chassis rim
✓Tactile phone / call icon with specular highlights
✓Soft diffuse claymorphic shadow stack

Code & Integration

Customized live with your active playground prop settings:

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

export default function Example() {
  return (
    <ElevatedUnderglowCTA
      label=""
      theme=""
      size="md"
      icon="phone"
      onClick={() => console.log("Call triggered")}
    />
  );
}

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"Book A Call"Text displayed on the elevated button face.
icon"phone" | "calendar" | "arrow" | "sparkle" | "mail""phone"Leading icon displayed next to the label.
theme"figma" | "uipirate" | "emerald" | "violet" | "crimson" | "dark""figma"Color theme for the underglow beam and reflection rim.
size"xs" | "sm" | "md" | "lg" | "xl""md"Size dimensions of the pill.