Glass Button

A liquid-glass pill that refracts the background behind it via animated SVG turbulence, with a beveled rim and a label that rolls up on hover.

Customize

Label

Size

Tint

Distortion14.0px

Frequency0.009

Text roll

Usage

import { GlassButton } from "@/components/lazy-ui/glass-button";

export function Demo() {
  return (
    // The glass refracts whatever sits behind it â€” place it over imagery.
    <div className="flex flex-wrap items-center gap-3 rounded-2xl bg-[url('/your-bg.jpg')] bg-cover p-8">
      <GlassButton size="md">Hover me</GlassButton>
      <GlassButton size="lg" tint="cool" distortion={18}>
        Get started
      </GlassButton>
    </div>
  );
}