Glass Button

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { cn } from "@/lib/utils"
6import { Slot as SlotPrimitive } from "radix-ui"
7 
8const glassButtonVariants = cva(
9  cn(
10    "relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl cursor-pointer",
11    "text-sm font-medium transition-all duration-300 ease-out",
12    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
13    "disabled:pointer-events-none disabled:opacity-50",
14    "hover:scale-105 active:scale-95",
15    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
16  ),
17  {
18    variants: {
19      variant: {
20        default: cn(
21          "bg-white/20 backdrop-blur-xl border border-white/30 text-white",
22          "shadow-[0_4px_16px_rgba(0,0,0,0.2)]",
23          "hover:bg-white/30 hover:border-white/40",
24          "before:absolute before:inset-0 before:rounded-xl",
25          "before:bg-linear-to-b before:from-white/20 before:to-transparent before:pointer-events-none",
26        ),
27        primary: cn(
28          "bg-linear-to-r from-cyan-500/80 via-blue-500/80 to-purple-500/80",
29          "backdrop-blur-xl border border-white/30 text-white",
30          "shadow-[0_4px_20px_rgba(59,130,246,0.4)]",
31          "hover:shadow-[0_4px_30px_rgba(59,130,246,0.6)]",
32          "before:absolute before:inset-0 before:rounded-xl",
33          "before:bg-linear-to-b before:from-white/30 before:to-transparent before:pointer-events-none",
34        ),
35        outline: cn(
36          "bg-transparent backdrop-blur-sm border-2 border-white/40 text-white",
37          "hover:bg-white/10 hover:border-white/60",
38        ),
39        ghost: cn("bg-transparent text-white/70", "hover:bg-white/10 hover:text-white"),
40        destructive: cn(
41          "bg-red-500/30 backdrop-blur-xl border border-red-400/40 text-red-100",
42          "shadow-[0_4px_16px_rgba(239,68,68,0.3)]",
43          "hover:bg-red-500/40 hover:border-red-400/60",
44          "before:absolute before:inset-0 before:rounded-xl",
45          "before:bg-linear-to-b before:from-white/10 before:to-transparent before:pointer-events-none",
46        ),
47      },
48      size: {
49        default: "h-10 px-4 py-2",
50        sm: "h-8 px-3 text-xs",
51        lg: "h-12 px-6 text-base",
52        icon: "h-10 w-10",
53      },
54    },
55    defaultVariants: {
56      variant: "default",
57      size: "default",
58    },
59  },
60)
61 
62// … truncated