Glow Button

Button with animated conic gradient glow effect and glassmorphic styling

Glow Button

An interactive button component featuring animated conic gradient glow, glassmorphic background, and gradient-masked borders. The signature call-to-action element of the Bento UI Kit.

Usage

import { GlowButton } from "@/components/ui/glow-button";

export default function Example() {
  return (
    <GlowButton>Get Started</GlowButton>
  );
}

Components

GlowButton

The main button component with glassmorphic styling and optional animated glow effect.

GlowButtonCircle

Internal component that renders the animated conic gradient glow. Automatically included when glow="animated".

Props

GlowButton Props

Prop	Type	Default	Description
variant	"default" | "primary" | "ghost"	"default"	Visual style variant
size	"default" | "sm" | "lg"	"default"	Button size
glow	"none" | "default" | "animated"	"default"	Glow effect type
asChild	boolean	false	Render as child element (Radix Slot)

Variants

Style Variants

// Default - glassmorphic background
<GlowButton variant="default">Default</GlowButton>

// Primary - solid light background
<GlowButton variant="primary">Primary</GlowButton>

// Ghost - transparent, hover reveals background
<GlowButton variant="ghost">Ghost</GlowButton>

Size Variants

// Small - 36px height, 16px radius
<GlowButton size="sm">Small</GlowButton>

// Default - 48px height, 32px radius
<GlowButton size="default">Default</GlowButton>

// Large - 56px height, 32px radius
<GlowButton size="lg">Large</GlowButton>

Glow Variants

// No glow effect
<GlowButton glow="none">No Glow</GlowButton>

// Default glow (border highlight on hover)
<GlowButton glow="default">Default Glow</GlowButton>

// Animated conic gradient glow
<GlowButton glow="animated">Animated Glow</GlowButton>

Examples

With Animated Glow

<GlowButton glow="animated">
  Explore Features
</GlowButton>

The animated glow features:

• Rotating conic gradient (3.6s cycle)
• Blur effect (15px)
• Inner glow reveal on hover
• Smooth opacity transitions

As Link

import Link from "next/link";

<GlowButton asChild>
  <Link href="/docs">Read Documentation</Link>
</GlowButton>

Primary Action

<GlowButton variant="primary" size="lg">
  Get Started Free
</GlowButton>

Button Group

<div className="flex gap-4">
  <GlowButton variant="primary">Sign Up</GlowButton>
  <GlowButton variant="ghost">Learn More</GlowButton>
</div>

With Icon

<GlowButton glow="animated">
  <ArrowRightIcon className="w-4 h-4" />
  Continue
</GlowButton>

Design Tokens

Dimensions

Size	Height	Padding	Border Radius
sm	36px	16px 16px	16px
default	48px	12px 32px	32px
lg	56px	16px 40px	32px

Effects

Token	Value	Description
Background	rgba(40, 40, 40, 0.7)	Glassmorphic overlay
Blur	50px	Backdrop blur
Border	rgba(248, 248, 248, 0.25)	Gradient-masked border
Inset shadow	inset 2px 4px 16px rgba(248,248,248,0.06)	Inner glow
Glow blur	15px	Animated glow blur
Animation	3.6s linear infinite	Glow rotation speed

Colors

Variant	Background	Text
default	rgba(40, 40, 40, 0.7)	var(--ui-text-secondary)
primary	var(--neutral-2-100)	var(--neutral-4-100)
ghost	transparent	var(--ui-text-secondary)

Animation Details

The animated glow uses a CSS keyframe animation defined in globals.css:

@keyframes button-glow {
  0% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-30px) rotate(90deg); }
  50% { transform: translateX(0) rotate(180deg); }
  75% { transform: translateX(30px) rotate(270deg); }
  100% { transform: translateX(0) rotate(360deg); }
}

Hover Behavior

1. Default state: Rotating conic gradient visible
2. Hover state: Gradient fades out, inner glow fades in
3. Border: Opacity increases from 25% to 100%

Found In

Universal - Used as the primary call-to-action button in the base Bento component wrapper. Appears in all 30 Bento card footers.

Accessibility

• Full keyboard navigation support
• Focus ring with focus-visible styling
• Disabled state with reduced opacity
• asChild prop for semantic link rendering
• Proper button role and states