Button Templates - UI Component Library

A collection of high-impact action buttons. Optimized for UX, accessible, and fully customizable for your brand.

Stellar Primary Button
buttons

Stellar Primary Button

A high-impact, premium primary action button featuring smooth gradients, dynamic hover lifting, and ...

Premium Action Gradient Glow Modern
Luminous Ghost Button
buttons

Luminous Ghost Button

A sophisticated secondary action button featuring a delicate luminous outline, glassmorphic surface ...

Glass Outline Minimalist Responsive Modern
Stellar Text Button
buttons

Stellar Text Button

A minimalist text-only button with a kinetic underline effect that grows from the center on hover. I...

Text Only Minimalist Animated Clean Modern
Luminous Orbit Icon Button
buttons

Luminous Orbit Icon Button

A high-fidelity circular icon button featuring glassmorphic transparency, an animated orbital hover ...

Icon Only Glass Circular Modern Interactive
Aura Hybrid Button
buttons

Aura Hybrid Button

A premium hybrid button combining flexible vector iconography with high-impact typography. Supports ...

Icon + Text Hybrid Modern Interactive Glow
Kinetic Block Button
buttons

Kinetic Block Button

A powerful full-width action button designed for maximum conversion. Features a tactile 3D feel with...

Full-Width Block Tactile Bold Responsive
Aura Micro Button
buttons

Aura Micro Button

A refined, high-density micro button designed for tight interfaces and utility actions. Bold typogra...

Compact Dense Micro Minimalist Modern
Rounded Pill Button
buttons

Rounded Pill Button

An elegant capsule-shaped button with a fixed pill structure. Features a luminous glow system and a ...

Shape Pill Rounded Modern Glow
Cyber Sharp Button
buttons

Cyber Sharp Button

A bold, angular button with zero rounding. Perfect for industrial, tech, or brutalist designs. Featu...

Shape Sharp Brutalist Modern Industrial
Aura Velvet Button
buttons

Aura Velvet Button

A friendly and modern button with soft, pleasant corners. Features a sophisticated velvet gradient, ...

Shape Soft Modern Minimalist Gradient
Orbital Pulse Button
buttons

Orbital Pulse Button

A striking circular icon button featuring an animated 'orbital pulse' system. Perfect for primary fl...

Shape Circular Icon Animated Glow
Aura Tectonic Button
buttons

Aura Tectonic Button

A sharp, angular icon button with a bold tectonic feel. Features offset depth shadows and a satisfyi...

Shape Square Icon Brutalist Modern
Glass Segmented Control Button
buttons

Glass Segmented Control Button

A sophisticated glassmorphic segmented control featuring a smooth sliding active state and 3 customi...

Shape Segmented Control Modern Interactive Glass
Aura Solid Button
buttons

Aura Solid Button

A refined, pure solid-fill button. Features a clean architectural design with subtle inner highlight...

Fill Solid Classic Modern Clean
Aura Outline Button
buttons

Aura Outline Button

A sharp, minimalist outline button with a sophisticated interactive fill transition. Features adjust...

Style Outline Border Animated Clean
Aura Ghost Button
buttons

Aura Ghost Button

A minimalist ghost button that remains subtle until interaction. Features a soft background tint, te...

Style Ghost Minimalist Clean Modern
Glassmorphic Transparent Button
buttons

Glassmorphic Transparent Button

A high-fidelity glassmorphic button with adjustable surface transparency and backdrop blur. Perfect ...

Style Transparent Glass Modern Premium
Aura Inverted Button
buttons

Aura Inverted Button

A high-impact, high-contrast button that swaps its foreground and background colors on hover. Featur...

Style Inverted Brutalist High-Contrast Clean
Spectrum Gradient Button
buttons

Spectrum Gradient Button

A vibrant, multi-color gradient button with an animated hover state. Features a soft atmospheric glo...

Color Gradient Dynamic Modern Glow
Slate Monochrome Button
buttons

Slate Monochrome Button

A sophisticated single-color button focusing on depth, texture, and architectural precision. Feature...

Color Monochrome Minimalist Slate Clean
Aura Duotone Button
buttons

Aura Duotone Button

A high-contrast duotone button featuring kinetic horizontal motion and a satisfying offset block sha...

Color Duotone Contrast Modern Kinetic
Zenith High-Contrast Button
buttons

Zenith High-Contrast Button

A high-visibility, neo-brutalist button designed for accessibility and maximum impact. Features heav...

Color High-Contrast Brutalist Accessibility Bold
Soft Sorbet Pastel Button
buttons

Soft Sorbet Pastel Button

A soft and airy pastel button with a cloudy aesthetic. Features multi-layered desaturated shadows an...

Color Pastel Soft Minimalist Elegant
Aura Neon Pulse Button
buttons

Aura Neon Pulse Button

A high-energy futuristic button featuring customizable neon glows and interactive lighting effects. ...

Color Neon Glow Futuristic Cyberpunk
Aura Fade Hover Button
buttons

Aura Fade Hover Button

A sophisticated interaction button focusing on ultra-smooth color transitions. Ideal for professiona...

Interaction Fade Minimalist Smooth Clean
Aura Slide Hover Button
buttons

Aura Slide Hover Button

A satisfying kinetic interaction button where a solid background slides into focus on hover. Perfect...

Interaction Slide Kinetic Modern Dynamic
Aura Expand Button
buttons

Aura Expand Button

A high-fidelity tactile interaction button that expands with a satisfying bounce on hover. Features ...

Interaction Expand Tactile Modern Bouncy
Aura Underline Reveal Button
buttons

Aura Underline Reveal Button

A refined minimalist link-style button featuring a kinetic directional underline reveal. Perfect for...

Interaction Underline Minimalist Link Modern
Aura Border Trace Button
buttons

Aura Border Trace Button

A sophisticated interaction button featuring an SVG path that 'traces' the button's perimeter on hov...

Interaction Border Tracing Modern Dynamic
Aura Ripple Click Button
buttons

Aura Ripple Click Button

A high-fidelity interaction button featuring a Material Design-inspired ripple effect. Spawns an exp...

Interaction Ripple Material Modern Responsive
Loading Spinner Button
buttons

Loading Spinner Button

A professional loading state button featuring a smooth spinner animation and layout transition. Perf...

Animated Loading Spinner Interactive Feedback
Progress Indicator Button
buttons

Progress Indicator Button

A high-visibility progress button that fills dynamically based on a percentage value. Includes a sub...

Animated Progress Filing Interactive UX
Pulse Animation Button
buttons

Pulse Animation Button

A high-conversion button featuring a continuous rhythmic pulse animation. Perfect for Call-to-Action...

Animated Pulse Glow Interactive Attention
Bounce Click Button
buttons

Bounce Click Button

A playful, tactile button that features a realistic 3D 'squish' effect on click. Uses spring-based C...

Animated Bounce Playful Tactile Interactive
Bioluminescent Glow Button
buttons

Bioluminescent Glow Button

A sophisticated button featuring a 'bioluminescent' breathing glow effect. The aura subtly expands a...

Animated Glow Aura Premium Futuristic
Elastic Morphing Button
buttons

Elastic Morphing Button

A dynamic button that morphs its physical shape and color on hover. Uses a complex cubic-bezier tran...

Animated Morphing Shape-Shift Elastic Interactive
Minimal Flat Button
buttons

Minimal Flat Button

A clean, distraction-free flat button designed for secondary actions. No shadows or borders, focusin...

Flat Minimalist Shadowless Clean
High-Elevation Raised Button
buttons

High-Elevation Raised Button

A premium elevated button featuring complex multi-layered shadows to simulate realistic depth and ph...

Raised Elevation Shadows 3D Premium
Airy Soft-Shadow Button
buttons

Airy Soft-Shadow Button

A high-end 'airy' button featuring an extremely diffused soft shadow. Perfect for minimalist designs...

Soft Shadows Diffused Modern Clean
Concave Pressed Button
buttons

Concave Pressed Button

A sophisticated interactive button that uses multiple inset shadows to create a 'pressed' or concave...

Inset Pressed Concave Neumorphic Interactive
Material Floating Action Button (FAB)
buttons

Material Floating Action Button (FAB)

A classic Material Design-inspired circular button that floats above the content. Includes a dynamic...

Floating FAB Circular Icon High Elevation
Glassmorphic Action Button
buttons

Glassmorphic Action Button

A sophisticated glassmorphic button that uses backdrop-filter for a realistic frosted glass effect. ...

Glassmorphism Translucent Backdrop Blur Frosted Glass Modern
Soft UI Neumorphic Button
buttons

Soft UI Neumorphic Button

A classic Neumorphic (Soft UI) button that blends seamlessly into its background. Features dual shad...

Neumorphism Soft UI Tactile Modern
Elegant Minimalist Button
buttons

Elegant Minimalist Button

An elegant, typography-focused button. Avoids backgrounds and borders in favor of crisp Inter font a...

Minimalism Typography Swiss Design Clean Modern
Neo-Brutalist Block Button
buttons

Neo-Brutalist Block Button

A high-impact Neo-Brutalist button featuring hard black shadows, thick borders, and vibrant colors. ...

Brutalism Neo-Brutalist High Contrast Bold Impactful
Material 3 Tonal Button
buttons

Material 3 Tonal Button

A standard Google Material Design 3 (M3) tonal button. Features a wide corner radius, subtle elevati...

Material Design Google M3 Android Tonal
High-Impact CTA Button
buttons

High-Impact CTA Button

A high-conversion CTA button designed for landing pages. Includes a dynamic gradient, ambient glow, ...

CTA Gradient Glow Marketing Conversion
Interactive Submit Button
buttons

Interactive Submit Button

A functional submit button that transforms into a success state upon interaction. Features a vertica...

Submit Form Feedback Interactive Functional
Download Button with Metadata
buttons

Download Button with Metadata

A specialized button for file downloads. Includes a dedicated icon area with a 'bounce' animation on...

Download File Metadata Functional
E-commerce Cart Button
buttons

E-commerce Cart Button

A high-conversion shop button. Features an expressive cart icon that scale-rotates on hover and prov...

Add to Cart Shop Success Commercial Functional
State Toggle Button
buttons

State Toggle Button

A dual-state functional button that behaves like a large switch. Perfect for settings or preferences...

Toggle Switch Binary Functional
Dropdown Trigger
buttons

Dropdown Trigger

A standard UI trigger for dropdown menus. Includes a chevron icon that smoothly rotates when the sta...

Dropdown Menu Chevron Select Functional
Muted Disabled Button
buttons

Muted Disabled Button

A correctly styled disabled button. Focuses on low contrast, non-interactive states, and optional fu...

Disabled Inactive Non-interactive Locked State
Persistent Active Button
buttons

Persistent Active Button

Represents a selected or primary active state. Features a bold highlight ring and a pill-shaped indi...

Active Selected Highlighted State
Positive Success Button
buttons

Positive Success Button

A vibrant green button for confirming successful actions. Includes an animated checkmark that draws ...

Success Green Positive Confirmed State
Critical Error Button
buttons

Critical Error Button

A high-visibility red button for dangerous or failed actions. Features an optional haptic shake anim...

Error Red Negative Alert State
Cautionary Warning Button
buttons

Cautionary Warning Button

An amber/orange button designed for cautionary feedback. Includes a subtle ambient glow and a pulsin...

Warning Orange Caution Amber State
Horizontal Button Group
buttons

Horizontal Button Group

A set of buttons joined together horizontally. Perfect for toolbars or filtering options. The group ...

Group Horizontal Unified Toolbar Selection
Vertical Button Group
buttons

Vertical Button Group

A vertically stacked group of buttons. Ideal for navigation menus or command lists. Includes a subtl...

Group Vertical Stack Menu Sidebar
Dual-Action Split Button
buttons

Dual-Action Split Button

A compound button that separates a primary action from a secondary dropdown menu. Features independe...

Split Dropdown Dual Action Menu Functional
Segmented Control Group Button
buttons

Segmented Control Group Button

A sophisticated segmented control group. One item remains highlighted at all times, making it ideal ...

Toggle Group Segmented Tabs Functional
Liquid Fill Effect Button
buttons

Liquid Fill Effect Button

A stunning visual effect where the button appears to fill with liquid waves on hover. Features high-...

Creative Liquid Wave Animation Unique
Magnetic Pull Button
buttons

Magnetic Pull Button

An interactive button that is physically 'pulled' toward the user's cursor within a magnetic zone. C...

Creative Magnetic Interactive JS Unique
Pushable 3D Button
buttons

Pushable 3D Button

A retro-inspired 3D button that physically compresses when 'clicked'. Features separate face and sid...

Creative 3D Perspective Tactile Unique
3D Parallax Tilt Button
buttons

3D Parallax Tilt Button

An immersive card-like button that tilts in 3D space in response to mouse movement. Includes a dynam...

Creative Parallax Tilt JS Dark-Mode
Cyberpunk Glitch Button
buttons

Cyberpunk Glitch Button

Inspired by cyberpunk aesthetics, this button features rapid-slice animations and RGB displacement o...

Creative Glitch Cyberpunk RGB Unique
Retro 8-Bit Pixel Button
buttons

Retro 8-Bit Pixel Button

A pixel-perfect button that uses custom box-shadow stacks to create a stepped, retro border. Comes p...

Creative Pixel Retro 8-Bit Gaming
Sketch Hand-Drawn Button
buttons

Sketch Hand-Drawn Button

An irregular, organic button that mimics the look of a marker sketch on paper. Features asymmetrical...

Creative Hand-Drawn Sketch Unique Playful