BUTTONS

Default Primary Secondary Success Info Warning Danger Link Button

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

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

<!-- Secondary -->
<button type="button" class="btn btn-secondary">Secondary</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>

Primary Secondary Success Info Warning Danger Link Button

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

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

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

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

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

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

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

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

Large button Default button 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>

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

Standard Buttons

<-- 
AVAILABLE CLASSES
btn-primary
btn-danger
btn-warning
btn-info
btn-default
-->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Default </button>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#"><i class="fa fa-edit"></i> Action</a></li>
<li class="dropdown-item"><a href="#"><i class="fa fa-question-circle"></i> Another action</a></li>
<li class="dropdown-item"><a href="#"><i class="fa fa-print"></i> Something else here</a></li>
<li class="dropdown-item divider"></li>
<li class="dropdown-item"><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-default
-->
<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"></button>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#"><i class="fa fa-edit"></i> Action</a></li>
<li class="dropdown-item"><a href="#"><i class="fa fa-question-circle"></i> Another action</a></li>
<li class="dropdown-item"><a href="#"><i class="fa fa-print"></i> Something else here</a></li>
<li class="dropdown-item divider"></li>
<li class="dropdown-item"><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-default
-->

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

3D Buttons

Default Primary Success Info Warning Danger

<!-- Default -->
<button type="button" class="btn btn-default btn-3d">Default</button>

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

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

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

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

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

---

Featured Buttons

<!--
AVAILABLE COLORS

.btn-default
.btn-success
.btn-danger
.btn-warning
.btn-info

.btn-red
.btn-teal
.btn-yellow
.btn-green
.btn-brown
.btn-aqua
.btn-lime
.btn-purple
.btn-leaf
.btn-pink
.btn-dirtygreen
.btn-blue
.btn-amber
.btn-black
.btn-white

ICON POSITION [also available on RTL]
.btn-inverse = inverse icon [left|right]
-->
<a href="#" class="btn btn-featured btn-default">
	<span>FREE WORLWIDE SHIPPING</span>
	<i class="et-megaphone"></i>
</a>

---

Color 3D Buttons

Red Teal Yellow Green Brown Aqua Purple Leaf Pink Blue Dirty Green Amber Black White

<!--
AVAILABLE COLORS

.btn-default
.btn-success
.btn-danger
.btn-warning
.btn-info

.btn-red
.btn-teal
.btn-yellow
.btn-green
.btn-brown
.btn-aqua
.btn-lime
.btn-purple
.btn-leaf
.btn-pink
.btn-dirtygreen
.btn-blue
.btn-amber
.btn-black
.btn-white

-->

<a href="#" class="btn btn-3d btn-red"><i class="et-megaphone"></i>Red</a>
<a href="#" class="btn btn-3d btn-teal"><i class="et-beaker"></i>Teal</a>
<a href="#" class="btn btn-3d btn-yellow"><i class="icon-beaker"></i>Yellow</a>
<a href="#" class="btn btn-3d btn-green"><i class="et-trophy"></i>Green</a>
<a href="#" class="btn btn-3d btn-brown"><i class="et-basket"></i>Brown</a>
<a href="#" class="btn btn-3d btn-aqua"><i class="et-key"></i>Aqua</a>
<a href="#" class="btn btn-3d btn-purple"><i class="et-tools"></i>Purple</a>
<a href="#" class="btn btn-3d btn-leaf"><i class="et-tools-2"></i>Leaf</a>
<a href="#" class="btn btn-3d btn-pink"><i class="et-shield"></i>Pink</a>
<a href="#" class="btn btn-3d btn-blue"><i class="et-strategy"></i>Blue</a>
<a href="#" class="btn btn-3d btn-dirtygreen"><i class="et-caution"></i>Dirty Green</a>
<a href="#" class="btn btn-3d btn-amber"><i class="et-heart"></i>Amber</a>
<a href="#" class="btn btn-3d btn-black"><i class="et-clock"></i>Black</a>
<a href="#" class="btn btn-3d btn-white"><i class="et-chat"></i>White</a>

---

Color 3D Buttons Extra Large

TRY SMATRY DEMO 30 days demo for free PURCHASE SMARTY NOW Free lifetime update included CREATE SMARTY ACCOUNT Email activation is required

<!--
AVAILABLE COLORS

.btn-default
.btn-success
.btn-danger
.btn-warning
.btn-info

.btn-red
.btn-teal
.btn-yellow
.btn-green
.btn-brown
.btn-aqua
.btn-lime
.btn-purple
.btn-leaf
.btn-pink
.btn-dirtygreen
.btn-blue
.btn-amber
.btn-black
.btn-white

-->
<a href="#" class="btn btn-3d btn-xlg btn-red">
PURCHASE SMARTY NOW
<span class="block font-lato">Free lifetime update included</span>
</a>

---

Small Small Small Small Small

Medium Medium Medium Medium Medium

Large Large Large Large Large

REVEAL EXTRA LARGE REVEAL EXTRA LARGE

<!--
AVAILABLE COLORS

.btn-default
.btn-success
.btn-danger
.btn-warning
.btn-info

.btn-red
.btn-teal
.btn-yellow
.btn-green
.btn-brown
.btn-aqua
.btn-lime
.btn-purple
.btn-leaf
.btn-pink
.btn-dirtygreen
.btn-blue
.btn-amber
.btn-black
.btn-white

-->

<!-- Small -->
<a href="#" class="btn btn-3d btn-sm btn-reveal btn-red">
<i class="et-megaphone"></i>
<span>Small</span>
</a>
<!-- Medium -->
<a href="#" class="btn btn-3d btn-reveal btn-red">
<i class="et-megaphone"></i>
<span>Medium</span>
</a>
<!-- Large -->
<a href="#" class="btn btn-3d btn-lg btn-reveal btn-blue">
<i class="et-megaphone"></i>
<span>Large</span>
</a>
<!-- Extra Large -->
<a href="#" class="btn btn-3d btn-xlg btn-reveal btn-brown">
<i class="et-megaphone"></i>
<span>REVEAL EXTRA LARGE</span>
</a>

---

Bordered Button

SMALL MEDIUM LARGE
TRY SMARTY DEMO 30 days demo for free

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

---

Theme Button

SMALL MEDIUM LARGE
TRY SMARTY DEMO 30 days demo for free

<!-- 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 fs-20">
TRY SMARTY DEMO
<span class="block font-lato">30 days demo for free</span>
</a>