Glass Button

A pill button with a built-in SVG glass filter — turbulence + displacement refraction baked in, with tint and distortion presets.

glass-button
0px

Customize

Edit props; preview updates instantly.

Customize
Label
Size
Tint
Distortion
10.0px
Frequency
0.014

Props

Props accepted by GlassButton.

PropTypeDefaultDescription
childrenReactNode—Button label or arbitrary inline content.
distortionnumber10Displacement amplitude in CSS pixels at rest — how far each edge pixel is shoved by the noise field. The idle pulse swings ±2 around this; hover swings ±4 around base+3; click pops a +28 wave that decays over ~700ms.
frequencynumber0.014Turbulence base frequency at rest. Smaller values produce bigger, more lens-like refraction blobs; larger values produce a finer-grained frosted-glass texture. The frequency drifts continuously in time so the noise blobs reshape — hover accelerates this drift, so the edges shimmer faster.
staticGlassbooleanfalseDisable the idle pulse + hover boost + click pop so the refraction is frozen at the base distortion. Auto-enabled when the user prefers reduced motion.
tint"cool" | "warm" | "none""cool"Final color-matrix nudge. `cool` adds a faint blue cast, `warm` a faint red cast, `none` leaves color untouched.
size"sm" | "md" | "lg""md"Visual size preset — controls height, padding, and text size.
classNamestring—Extra class names merged onto the underlying button.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/glass-button.json

Usage

Import the component and drop it into a render.

demo.tsx14 lines
import { GlassButton } from "@/components/lazy-ui/glass-button";

export function Demo() {
  return (
    <div className="flex flex-wrap gap-3">
      <GlassButton size="md" tint="cool">
        Enter the void
      </GlassButton>
      <GlassButton size="md" tint="warm" distortion={10}>
        Stronger refraction
      </GlassButton>
    </div>
  );
}