Button Glass

1"use client";
2 
3import { useState, type ButtonHTMLAttributes, type PointerEvent } from "react";
4 
5export function GlassButton({
6  className = "",
7  children,
8  onPointerEnter,
9  onPointerLeave,
10  onPointerDown,
11  onPointerUp,
12  onPointerCancel,
13  ...props
14}: ButtonHTMLAttributes<HTMLButtonElement>) {
15  // Real pointers drive the native `:hover`/`:active` pseudo-classes below just
16  // fine. But a synthetic (`dispatchEvent`, `isTrusted: false`) pointer never
17  // reaches the UA's own hover/activation state machine — Chromium confirmed
18  // not to flip `:hover`/`:active` for script-dispatched events, even though
19  // the same event fires every JS listener bound to it. That left this button
20  // dead in the landing-page card, whose autoplay driver only has synthetic
21  // events to offer. Mirroring both states into JS-tracked data-attributes
22  // (additive, not a replacement) gives the driver something that responds,
23  // without changing anything for a real mouse, touch, or keyboard press.
24  const [hover, setHover] = useState(false);
25  const [pressed, setPressed] = useState(false);
26 
27  return (
28    <button
29      data-hover={hover}
30      data-press={pressed}
31      onPointerEnter={(e: PointerEvent<HTMLButtonElement>) => {
32        setHover(true);
33        onPointerEnter?.(e);
34      }}
35      onPointerLeave={(e: PointerEvent<HTMLButtonElement>) => {
36        setHover(false);
37        setPressed(false);
38        onPointerLeave?.(e);
39      }}
40      onPointerDown={(e: PointerEvent<HTMLButtonElement>) => {
41        setPressed(true);
42        onPointerDown?.(e);
43      }}
44      onPointerUp={(e: PointerEvent<HTMLButtonElement>) => {
45        setPressed(false);
46        onPointerUp?.(e);
47      }}
48      onPointerCancel={(e: PointerEvent<HTMLButtonElement>) => {
49        setPressed(false);
50        onPointerCancel?.(e);
51      }}
52      className={[
53        "group relative inline-flex items-center justify-center overflow-hidden rounded-sm px-5 py-2.5 text-sm font-medium text-foreground",
54        // glass material: translucent fill, heavy blur, saturation boost
55        "bg-black/[0.04] backdrop-blur-xl backdrop-saturate-150 dark:bg-white/[0.06]",
56        "border border-black/10 dark:border-white/10",
57        // depth: top specular edge (inset) + soft lift shadow
58        "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.5),0_4px_16px_-4px_rgba(0,0,0,0.15)]",
59        "dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.12),0_8px_24px_-8px_rgba(0,0,0,0.5)]",
60// … truncated