LiquidGlassButton

A stylish Apple Liquid Glass-inspired button component with glassmorphism effects. Can render as either a native button or a Next.js Link with smooth interactions and accessibility features built-in.

✨ Features

• Apple Liquid Glass Design: Based on iOS 16/17 glassmorphism specifications
• Dual Functionality: Works as both button and link component
• Three Sizes: Small, medium, and large variants
• Hover & Active States: Smooth transitions with backdrop effects
• Accessibility: Full keyboard navigation and screen reader support
• New Tab Support: Optional external link handling
• Disabled States: Proper disabled styling for both buttons and links

📋 Prerequisites

This component requires:

• Next.js (with App Router)
• Tailwind CSS 4

🚀 Installation

# No additional dependencies required beyond Next.js and Tailwind

📁 Files Included

The component bundle includes:

• index.tsx - Main liquid glass button component
• README.md - This documentation

🎯 Basic Usage

1import { LiquidGlassButton } from './components/liquid-glass-button';
2
3export default function MyPage() {
4    return (
5        <div>
6            <LiquidGlassButton>Click me</LiquidGlassButton>
7        </div>
8    );
9}

The button renders with medium size and glassmorphism effects by default.

🔧 Props

Plus all standard button HTML attributes when used as a button.

📖 Examples

Button Sizes

1<div className="flex gap-4">
2    <LiquidGlassButton size="sm">Small</LiquidGlassButton>
3
4    <LiquidGlassButton size="md">Medium</LiquidGlassButton>
5
6    <LiquidGlassButton size="lg">Large</LiquidGlassButton>
7</div>

As Navigation Links

1<nav className="flex gap-4">
2    <LiquidGlassButton href="/">Home</LiquidGlassButton>
3
4    <LiquidGlassButton href="/about">About</LiquidGlassButton>
5
6    <LiquidGlassButton href="/contact">Contact</LiquidGlassButton>
7</nav>

External Links

1<div className="space-y-4">
2    <LiquidGlassButton href="https://github.com/yourproject" openInNewTab>
3        View on GitHub
4    </LiquidGlassButton>
5
6    <LiquidGlassButton href="https://docs.yourproject.com" openInNewTab>
7        Documentation
8    </LiquidGlassButton>
9</div>

Form Buttons

1<form>
2    <div className="flex gap-4">
3        <LiquidGlassButton type="submit">Submit Form</LiquidGlassButton>
4
5        <LiquidGlassButton type="button" disabled>
6            Processing...
7        </LiquidGlassButton>
8    </div>
9</form>

With Icons

1<div className="flex gap-4">
2    <LiquidGlassButton>
3        <span className="mr-2">📱</span>
4        Download App
5    </LiquidGlassButton>
6
7    <LiquidGlassButton href="/dashboard">
8        Dashboard
9        <span className="ml-2">→</span>
10    </LiquidGlassButton>
11</div>

Custom Styling

1<LiquidGlassButton className="font-bold tracking-wide" size="lg">
2    Custom Styled
3</LiquidGlassButton>

🎨 Design Specifications

Glassmorphism Effects

• Background: Multi-layer white gradient with transparency
• Border: Semi-transparent white border
• Backdrop: 2px blur with 150% saturation
• Shadows: Complex multi-layer shadow system for depth

Size Dimensions

• Small: px-3 py-1.5 text-sm rounded-xl
• Medium: px-4 py-2 text-base rounded-xl
• Large: px-6 py-3 text-lg rounded-2xl

Interactive States

• Hover: Elevated shadow, increased backdrop saturation, -2px transform
• Active: 98% scale with reduced shadow depth
• Focus: Blue ring with offset for keyboard navigation
• Disabled: 50% opacity with pointer events disabled

💡 Usage Tips

Background Recommendations

The liquid glass effect works best on:

• Image backgrounds with subtle textures
• Gradient backgrounds with multiple colors
• Video backgrounds or animated content
• Avoid: Plain white or black backgrounds (low contrast)

Best Practices

1// ✅ Good - on textured background
2<div
3  className="bg-gradient-to-br from-purple-600 to-blue-600 min-h-screen"
4  style={{ backgroundImage: 'url(/texture.png)' }}
5>
6  <LiquidGlassButton>Get Started</LiquidGlassButton>
7</div>
8
9// ✅ Good - as call-to-action
10<section className="bg-hero-image bg-cover">
11  <LiquidGlassButton size="lg" href="/signup">
12    Start Free Trial
13  </LiquidGlassButton>
14</section>
15
16// ⚠️ Consider alternatives - on plain backgrounds
17<div className="bg-white">
18  {/* Consider a different button style for plain backgrounds */}
19  <LiquidGlassButton>Click me</LiquidGlassButton>
20</div>

Content Guidelines

• Short Text: Works best with concise labels
• Icons: Enhance with simple icons or arrows
• Contrast: Ensure content is readable on glass effect

♿ Accessibility Features

Built-in Support

• Keyboard Navigation: Full tab and enter key support
• Screen Readers: Proper semantic HTML and ARIA attributes
• Focus Indicators: Visible focus rings for keyboard users
• Disabled States: Proper aria-disabled and tabIndex handling

Link Accessibility

1// External links automatically get proper attributes
2<LiquidGlassButton href="https://external.com" openInNewTab>
3  External Link
4</LiquidGlassButton>
5// Renders with: target="_blank" rel="noopener noreferrer"
6
7// Disabled links are properly marked
8<LiquidGlassButton href="/page" disabled>
9  Disabled Link
10</LiquidGlassButton>
11// Renders with: aria-disabled="true" tabIndex="-1"

🔧 Button vs Link Behavior

Automatic Detection

1// Renders as <button>
2<LiquidGlassButton onClick={handleClick}>
3  Button Action
4</LiquidGlassButton>
5
6// Renders as Next.js <Link>
7<LiquidGlassButton href="/page">
8  Navigate
9</LiquidGlassButton>

Props Inheritance

• As Button: Inherits all ButtonHTMLAttributes
• As Link: Inherits appropriate anchor attributes
• Forwarded Ref: Works with both button and anchor refs

🎭 Visual Effects Breakdown

Shadow Layers

1. Outer Depth: Creates elevation from background
2. Inner Highlight: Top edge brightness
3. Inner Depth: Bottom edge shadow
4. Specular Highlight: Central glow effect

Interaction Animations

• Duration: 200ms ease-out transitions
• Transform: GPU-accelerated for smooth performance
• Backdrop: Dynamic saturation changes
• Scale: Subtle feedback on press

⚠️ Technical Notes

Performance

• Uses transform-gpu for hardware acceleration
• Backdrop filters may impact performance on older devices
• Consider reducing effects for performance-critical applications

Browser Support

• Modern Browsers: Full support for all effects
• Older Browsers: Graceful degradation (shadows may be simplified)
• backdrop-blur: Requires modern browser support

Customization

Override default styles by adding classes:

1<LiquidGlassButton className="bg-red-500/20 border-red-500/30">
2    Custom Colors
3</LiquidGlassButton>