Skip to main content

Back to all patterns

Liquid Glass Button

ID: liquid_glass_button Category: action Required slots: label

Live example

Primary
CTA Accent
Danger
Sizes
Status chips Default Active Critical

Panel and nav surfaces with DIG v1.1 tokens:

Surface Card

Demonstrates tokenized panel, input, and CTA button states.

Overview

Frosted translucent primary action with high contrast and subtle depth. Includes size variants (sm, lg, icon-only), color variants (secondar...

Read more

Frosted translucent primary action with high contrast and subtle depth. Includes size variants (sm, lg, icon-only), color variants (secondary, destructive, success), and companion glass surfaces (card, nav, badge, input). Uses backdrop-filter with solid fallbacks.

Tags: button, action, glass, surface

When to use / When not to use

When to use

  • You want premium visual emphasis on calls to action in hero surfaces or floating panels.
  • A translucent control helps maintain context while preserving contrast and clear affordance.

When not to use

  • Dense data tables or compact forms where subtle translucent styling harms scan speed.
  • Low-contrast backgrounds where disabled and secondary states may blend with content.

Accessibility notes

  • Keyboard keys: Enter, Space.
  • ARIA attributes: aria-label, aria-disabled.
  • Visible focus required: Yes.

Implementation 

{{-- DIG v1.1 button system demo --}}
<div class="dig-stack">

  <div class="dig-lg-demo-surface dig-stack">
    <div class="dig-lg-demo-row dig-lg-demo-row--buttons">
      <span class="dig-lg-demo-label">Primary</span>
      <button type="button" class="dig-liquid-glass-btn">Submit</button>
      <button type="button" class="dig-liquid-glass-btn" disabled>Disabled</button>
    </div>

    <div class="dig-lg-demo-row dig-lg-demo-row--buttons">
      <span class="dig-lg-demo-label">CTA Accent</span>
      <button type="button" class="dig-liquid-glass-btn dig-liquid-glass-btn--secondary">Join now</button>
      <button type="button" class="dig-liquid-glass-btn dig-liquid-glass-btn--secondary" disabled>Disabled</button>
    </div>

    <div class="dig-lg-demo-row dig-lg-demo-row--buttons">
      <span class="dig-lg-demo-label">Danger</span>
      <button type="button" class="dig-liquid-glass-btn dig-liquid-glass-btn--destructive">Delete</button>
      <button type="button" class="dig-liquid-glass-btn dig-liquid-glass-btn--destructive" disabled>Disabled</button>
    </div>

    <div class="dig-lg-demo-row dig-lg-demo-row--buttons">
      <span class="dig-lg-demo-label">Sizes</span>
      <button type="button" class="dig-liquid-glass-btn dig-liquid-glass-btn--sm">Small</button>
      <button type="button" class="dig-liquid-glass-btn">Default</button>
      <button type="button" class="dig-liquid-glass-btn dig-liquid-glass-btn--lg">Large</button>
      <button type="button" class="dig-liquid-glass-btn dig-liquid-glass-btn--icon" aria-label="Settings">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M8 10a2 2 0 100-4 2 2 0 000 4z" stroke="currentColor" stroke-width="1.2"/><path d="M13.3 6.5l-.7-.4a5.5 5.5 0 00-.5-.8l.2-.8a.5.5 0 00-.2-.5l-1-1a.5.5 0 00-.5-.2l-.8.2a5 5 0 00-.8-.5L8.6 2a.5.5 0 00-.5-.4h-1.2a.5.5 0 00-.5.4l-.4.7a5 5 0 00-.8.5l-.8-.2a.5.5 0 00-.5.2l-1 1a.5.5 0 00-.1.5l.2.8a5 5 0 00-.5.8l-.8.4A.5.5 0 002 7v1.2a.5.5 0 00.4.5l.7.4a5 5 0 00.5.8l-.2.8a.5.5 0 00.2.5l1 1a.5.5 0 00.5.1l.8-.2a5 5 0 00.8.5l.4.8a.5.5 0 00.5.3h1.2a.5.5 0 00.5-.3l.4-.8a5 5 0 00.8-.5l.8.2a.5.5 0 00.5-.2l1-1a.5.5 0 00.1-.4l-.2-.8a5 5 0 00.5-.8l.8-.4a.5.5 0 00.3-.5V7a.5.5 0 00-.3-.5z" stroke="currentColor" stroke-width="1.2"/></svg>
      </button>
    </div>

    <div class="dig-lg-demo-row">
      <span class="dig-lg-demo-label">Status chips</span>
      <span class="dig-liquid-glass-badge">Default</span>
      <span class="dig-liquid-glass-badge">Active</span>
      <span class="dig-liquid-glass-badge dig-liquid-glass-badge--destructive">Critical</span>
    </div>
  </div>

  <p class="dig-meta dig-pattern-demo-note">Panel and nav surfaces with DIG v1.1 tokens:</p>

  <nav class="dig-liquid-glass-nav dig-lg-demo-row" aria-label="Demo navigation">
    <strong class="dig-pattern-demo-title">DIG Portal</strong>
    <span class="dig-pattern-demo-links">Home &middot; Events &middot; Patterns</span>
  </nav>

  <div class="dig-liquid-glass-card dig-stack">
    <strong>Surface Card</strong>
    <p class="dig-pattern-demo-copy">Demonstrates tokenized panel, input, and CTA button states.</p>
    <div class="dig-lg-demo-row">
      <input type="text" class="dig-liquid-glass-input dig-pattern-demo-input" placeholder="Tokenized input field..." aria-label="Demo input">
      <button type="button" class="dig-liquid-glass-btn dig-liquid-glass-btn--secondary dig-liquid-glass-btn--sm">Search</button>
    </div>
  </div>

</div>