Button Components
A complete library of button styles, states, sizes, animations and groups for every use case
Solid Variants
Filled buttons with gradient backgrounds for primary actions. Use
these as main CTAs.
<button class="btn
btn-primary"> Primary </button>
<button class="btn
btn-success"> Success </button>
<button class="btn
btn-danger"> Danger </button>
<!-- Variants: btn-accent | btn-warning | btn-dark | btn-light
-->
Outline Variants
Bordered buttons that fill on hover. Great for secondary actions
alongside solid buttons.
<button class="btn
btn-outline-primary">Primary</button>
<button class="btn
btn-outline-success">Success</button>
<!-- Variants: outline-accent | outline-warning | outline-danger |
outline-dark -->
Ghost / Soft
Translucent buttons with subtle color tints. Ideal for less
prominent actions and toolbars.
<button class="btn
btn-ghost-primary">Primary</button>
<!-- Variants: ghost-accent | ghost-success | ghost-warning | ghost-danger
-->
Sizes
Five size scales:
xs → sm →
md (default) → lg → xl.
<button class="btn
btn-primary btn-xs">Extra Small</button>
<button class="btn
btn-primary btn-sm">Small</button>
<button class="btn
btn-primary btn-md">Medium</button>
<button class="btn
btn-primary btn-lg">Large</button>
<button class="btn
btn-primary btn-xl">Extra Large</button>
Shapes
Choose from rounded, pill, square, and circle shapes.
<button class="btn
btn-primary">Rounded</button>
<button class="btn
btn-primary btn-pill">Pill</button>
<button class="btn
btn-primary btn-square">Square</button>
<button class="btn
btn-primary btn-circle"><i class="fas
fa-plus"></i></button>
Icon Buttons
Buttons with leading, trailing icons or animated icon interactions
on hover.
Leading icon
Trailing icon
Animated icon on hover
<!-- Leading icon -->
<button class="btn
btn-primary btn-icon-left"><i
class="fas fa-download"></i> Download </button>
<!-- Trailing icon -->
<button class="btn
btn-primary btn-icon-right">Continue <i class="fas fa-arrow-right"></i></button>
<!-- Spin on hover -->
<button class="btn
btn-primary btn-icon-spin"><i
class="fas fa-sync-alt"></i> Refresh </button>
States
Disabled, loading, and toggle button states.
Disabled
Loading (click to trigger)
Toggle state (click to toggle)
<!-- Disabled -->
<button class="btn
btn-primary" disabled>Disabled</button>
<!-- Loading -->
<button class="btn
btn-primary btn-loading"><span
class="btn-text">Save</span></button>
<!-- Toggle -->
<button class="btn
btn-toggle" onclick="this.classList.toggle('toggled')">Favourite</button>
Gradient Buttons
Multi-stop gradient fills for eye-catching hero sections and
premium CTAs.
<button class="btn
btn-grad-1">Indigo → Cyan</button>
<button class="btn
btn-grad-2">Green → Cyan</button>
<button class="btn
btn-grad-3">Amber → Red</button>
<button class="btn
btn-grad-4">Purple → Pink</button>
Animated Effects
CSS-powered animation effects: glow, shimmer, 3D push, slide-fill,
jelly, and neon.
<button class="btn
btn-glow">Glow Pulse</button>
<button class="btn
btn-shimmer">Shimmer</button>
<button class="btn
btn-3d">3D Push</button>
<button class="btn
btn-slide">Slide Fill</button>
<button class="btn
btn-jelly">Jelly</button>
<button class="btn
btn-neon">Neon</button>
Button Groups
Horizontal button groups for segmented controls and toolbars.
Solid group
Outline group
<div class="btn-group">
<button class="btn
btn-primary">Left</button>
<button class="btn
btn-primary">Center</button>
<button class="btn
btn-primary">Right</button>
</div>
Split Buttons
Main action + dropdown caret — click the caret arrow to open
options.
<div class="split-btn">
<button class="btn
btn-primary btn-main">Save</button>
<button class="btn
btn-primary btn-caret" onclick="toggleSplitMenu('sm1')">▾</button>
<div class="split-menu" id="sm1">...</div>
</div>
Badge Buttons
Buttons with notification badges for counters and alerts.
4
12
3
9
<div class="btn-badge">
<button class="btn
btn-primary">Notifications</button>
<span class="badge">4</span>
</div>
Full Width
Block-level buttons spanning the full container width — great for
mobile and form actions.
<button class="btn
btn-primary btn-full">Full Width</button>
Social / OAuth Buttons
Ready-to-use authentication and social sharing buttons.
<button class="btn"
style="background:#ea4335;color:#fff"><i class="fab fa-google"></i>
Google</button>
<button class="btn"
style="background:#24292e;color:#fff"><i class="fab fa-github"></i>
GitHub</button>