←
Glossy Gel Glass Button

Glossy Gel Glass Button

Liquid Glass

High-gloss skeuomorphic gel glass CTA button directly from Figma (Node 2:2). Multi-layer inner shadow depth, organic specular blurred highlight capsule, and crisp text drop shadow.

Interactive Playground & Studio

Live Controls
glossy-gel-button.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Emerald Mint (Node 2:2)theme="emerald-gel"

1:1 Figma fidelity skeuomorphic gel glass button with curved top specular highlight.

Electric Cyan Geltheme="cyan-gel"

Vibrant liquid cyan glass with multi-layer inner shadow depth and spring click bounce.

Cyber Violet Geltheme="violet-gel"

Rich purple glass finish with specular blurred highlight capsule and crisp drop shadow.

Magma Amber Geltheme="magma-gel"

Warm amber-gold liquid gel with tactile spring depression physics.

Frosted Silver Glasstheme="silver-glass"

Translucent frosted silver glass with optical refraction rim and clean typography.

Dark Obsidian Glasstheme="obsidian-glass"

Stealth obsidian glass with glowing cyan accent text and specular shine.

Features & Physics

✓1:1 Figma fidelity from node 2:2 (Glossy Gel Button)
✓4-layer optical drop & inner shadow composite
✓Curved blurred top specular reflection capsule
✓Interactive spring depression & specular sheen animation

Code & Integration

Customized live with your active playground prop settings:

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

export default function Example() {
  return (
    <GlossyGelButton
      theme=""
      size="md"
      onClick={() => console.log("Clicked")}
    >
      Get Started
    </GlossyGelButton>
  );
}

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
childrenReactNode"Get Started"Button text or custom children.
theme"emerald-gel" | "cyan-gel" | "violet-gel" | "magma-gel" | "silver-glass" | "obsidian-glass""emerald-gel"Color theme preset.
size"sm" | "md" | "lg" | "xl""md"Button size scale.
isLoadingbooleanfalseDisplays loading spinner.