Default Primary Success Info Warning Danger Link Button

<!-- Default -->
<button type="button" class="btn btn-secondary">Default</button>

<!-- Primary -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Success -->
<button type="button" class="btn btn-success">Success</button>

<!-- Info -->
<button type="button" class="btn btn-info">Info</button>

<!-- Warning -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Danger -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link Button</button>

                                

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-sm for additional sizes.

Large button Default button Small button Extra small button

Block level button

<!-- Large button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

<!-- Default (medium) button -->
<button type="button" class="btn btn-primary">Default button</button>

<!-- Small button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<!-- Extra small button -->
<button type="button" class="btn btn-primary btn-sm">Extra small button</button>

<!-- Block level button (full width) -->
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
                                

Standard Buttons

<-- 
AVAILABLE CLASSES
btn-primary
btn-danger
btn-warning
btn-info
btn-secondary
-->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-edit"></i> Action</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i> Another action</a></li>
<li><a href="#"><i class="fa fa-print"></i> Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a href="#"><i class="fa fa-cogs"></i> Separated link</a></li>
</ul>
</div>
                                

---

Split Buttons

<-- 
AVAILABLE CLASSES
btn-primary
btn-danger
btn-warning
btn-info
btn-secondary
-->
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-edit"></i> Action</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i> Another action</a></li>
<li><a href="#"><i class="fa fa-print"></i> Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a href="#"><i class="fa fa-cogs"></i> Separated link</a></li>
</ul>
</div>
                                

---

Dropup Variation

Trigger dropdown menus above elements by adding .dropup to the parent.

         

<-- 
AVAILABLE CLASSES
btn-primary
btn-danger
btn-warning
btn-info
btn-secondary
-->

<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Default 
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-edit"></i> Action</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i> Another action</a></li>
<li><a href="#"><i class="fa fa-print"></i> Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a href="#"><i class="fa fa-cogs"></i> Separated link</a></li>
</ul>
</div>
                                

Bordered Button

EXTRA SMALL SMALL MEDIUM LARGE

TRY SMARTY DEMO 30 days demo for free

<!-- Bordered Extra Small -->
<a href="#" class="btn btn-sm btn-secondary btn-bordered">
<i class="et-megaphone"></i>
<span>Extra Small</span>
</a>
<!-- Bordered Small -->
<a href="#" class="btn btn-sm btn-secondary btn-bordered">
<i class="et-megaphone"></i>
<span>Small</span>
</a>
<!-- Bordered Medium -->
<a href="#" class="btn btn-secondary btn-bordered">
<i class="et-megaphone"></i>
<span>Medium</span>
</a>
<!-- Bordered Large -->
<a href="#" class="btn btn-lg btn-secondary btn-bordered">
<i class="et-megaphone"></i>
<span>Large</span>
</a>
<!-- Bordered Extra Large -->
<a href="#" class="btn btn-xlg btn-secondary btn-bordered size-20">
TRY SMARTY DEMO
<span class="block font-lato">30 days demo for free</span>
</a>
                                

---

Theme Button

EXTRA SMALL SMALL MEDIUM LARGE

TRY SMARTY DEMO 30 days demo for free

<!-- Bordered Extra Small -->
<a href="#" class="btn btn-sm btn-primary">
<i class="et-megaphone"></i>
<span>Extra Small</span>
</a>
<!-- Bordered Small -->
<a href="#" class="btn btn-sm btn-primary">
<i class="et-megaphone"></i>
<span>Small</span>
</a>
<!-- Bordered Medium -->
<a href="#" class="btn btn-primary">
<i class="et-megaphone"></i>
<span>Medium</span>
</a>
<!-- Bordered Large -->
<a href="#" class="btn btn-lg btn-primary">
<i class="et-megaphone"></i>
<span>Large</span>
</a>
<!-- Bordered Extra Large -->
<a href="#" class="btn btn-xlg btn-primary size-20">
TRY SMARTY DEMO
<span class="block font-lato">30 days demo for free</span>
</a>