GlassButton

Frosted translucent button for dark surfaces, with press scale and a focus ring.

npx bezel-add add glass-button

About

A glassmorphism button for React that sits on dark or image backgrounds, using a backdrop blur, a translucent white fill and a thin border. Reach for it on hero sections or overlays where a solid button feels heavy. It spreads every native button attribute, scales down slightly on press, shows a visible focus ring and dims when disabled.

Key props: children (button label or content), className (extra classes appended to the glass styles), disabled (dims the button and cancels the press scale), onClick (any native button handler passes straight through)

packages/ui/src/GlassButton.tsx · 16 lines

import React from "react";

interface GlassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
}

export function GlassButton({ children, className = "", ...props }: GlassButtonProps) {
  return (
    <button
      className={`px-6 py-2 rounded-xl font-medium text-white backdrop-blur-md bg-white/10 border border-white/20 shadow-lg hover:bg-white/20 transition-[background-color,transform] duration-150 active:scale-[0.97] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100 ${className}`}
      {...props}
    >
      {children}
    </button>
  );
}