←
Frosted Gel Download Button

Frosted Gel Download Button

Glassmorphism

Dual-pill neumorphic split button with elevated ceramic pill, frosted glass gel download tile, optical refraction rings, and volumetric blue underglow flare.

Interactive Playground & Studio

Live Controls
frosted-gel-download-button.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-blue"

1:1 Figma ceramic pill with volumetric blue flare.

Cyber Violettheme="cyber-violet"

Ultraviolet refraction glow with tinted frosted gel.

Emerald Matrixtheme="emerald-matrix"

Cyberpunk reactor green glow with translucent glass tile.

Magma Orangetheme="magma-orange"

UI Pirate signature brand magma orange illumination.

Dark Obsidiantheme="dark-obsidian"

Stealth midnight pill with smoked dark glass cloud tile.

Titanium Goldtheme="titanium-gold"

Luxury warm gold underglow with champagne ceramic pill.

Features & Physics

✓Dual-pill split layout with independently elevated ceramic base
✓Frosted glass gel download tile with backdrop-blur refraction
✓Volumetric electric blue optical underglow flare
✓60fps spring lift on hover and click depression

Code & Integration

Customized live with your active playground prop settings:

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

export default function Example() {
  return (
    <FrostedGelDownloadButton
      label=""
      theme=""
      size="md"
      onDownload={() => console.log("Download started")}
    />
  );
}

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"Download now"Text label displayed inside the elevated ceramic pill.
theme"figma-blue" | "cyber-violet" | "emerald-matrix" | "magma-orange" | "dark-obsidian" | "titanium-gold""figma-blue"Color palette theme for the frosted gel tile and underglow.
size"xs" | "sm" | "md" | "lg" | "xl""md"Controls dimensions and padding scale.
onClick() => voidundefinedTriggered on clicking the gel download button.