diff --git a/docs/src/components/desktop/apps/DeveloperApp/previews.tsx b/docs/src/components/desktop/apps/DeveloperApp/previews.tsx
index f8d11b0..7091095 100644
--- a/docs/src/components/desktop/apps/DeveloperApp/previews.tsx
+++ b/docs/src/components/desktop/apps/DeveloperApp/previews.tsx
@@ -2009,7 +2009,7 @@ function ImageClickToEnlargeExample() {
 }
 
 // Glass Example Components - These show glassmorphism styling concepts
-// Note: Glass styling is achieved via className, not a glass prop
+// Note: Buttons use the glass prop; other previews reuse shared glass utility classes.
 const glassStyles = "bg-white/10 dark:bg-white/5 backdrop-blur-xl border border-white/20 dark:border-white/10";
 
 function CardGlassExample() {
@@ -2037,9 +2037,9 @@ function BadgeGlassExample() {
 function ButtonGlassExample() {
   return (
     <div className="flex flex-wrap gap-3">
-      <Button type="button" variant="primary" className="backdrop-blur-sm">Glass Button</Button>
-      <Button type="button" variant="secondary" className="backdrop-blur-sm">Secondary Glass</Button>
-      <Button type="button" variant="outline" className={glassStyles}>Outline Glass</Button>
+      <Button type="button" variant="primary" glass>Glass Button</Button>
+      <Button type="button" variant="secondary" glass>Secondary Glass</Button>
+      <Button type="button" variant="outline" glass>Outline Glass</Button>
     </div>
   );
 }
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 1f38dd0..3272875 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -80,6 +80,20 @@ const variantClasses: Record<ButtonVariant, string> = {
 	accent: "bg-violet-500 text-white hover:bg-violet-600",
 };
 
+const glassHoverClasses: Record<ButtonVariant, string> = {
+	default: "hover:bg-white/80 dark:hover:bg-zinc-900/80 hover:backdrop-blur-md",
+	primary: "hover:bg-blue-600/90 hover:backdrop-blur-md",
+	secondary: "hover:bg-white/80 dark:hover:bg-zinc-900/80 hover:backdrop-blur-md",
+	success: "hover:bg-emerald-600/90 hover:backdrop-blur-md",
+	warning: "hover:bg-amber-600/90 hover:backdrop-blur-md",
+	info: "hover:bg-sky-600/90 hover:backdrop-blur-md",
+	destructive: "hover:bg-red-600/90 hover:backdrop-blur-md",
+	outline: "hover:bg-white/80 dark:hover:bg-zinc-900/80 hover:backdrop-blur-md",
+	ghost: "hover:bg-white/80 dark:hover:bg-zinc-900/80 hover:backdrop-blur-md",
+	link: "hover:backdrop-blur-md",
+	accent: "hover:bg-violet-600/90 hover:backdrop-blur-md",
+};
+
 const sizeClasses: Record<ButtonSize, string> = {
 	default: "h-9 px-4 py-2",
 	sm: "h-8 rounded-lg px-3 text-xs",
@@ -149,7 +163,7 @@ const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonProps>(
 					variantClasses[variant],
 					sizeClasses[effectiveSize],
 					fullWidth && "w-full",
-					glass && "hover:bg-white/80 dark:hover:bg-zinc-900/80 hover:backdrop-blur-md",
+					glass && glassHoverClasses[variant],
 					className,
 				)}
 				// biome-ignore lint/suspicious/noExplicitAny: Framer Motion onDrag conflicts with HTML onDrag