BUTTONS

Default Primary Secondary Success Info Warning Danger Link Button

Default Primary Secondary Success Info Warning Danger

NOTE: add to any button: 
	.btn-round 
	.btn-shadow-1


<!-- 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 Secondary Success Info Warning Danger

NOTE: add .btn-round class to any 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

Large button Default button Small button

Block level 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

.btn-round  - rounded


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>

<a href="#" class="btn btn-featured btn-inverse btn-default">
	<span>FREE WORLWIDE SHIPPING</span>
	<i class="et-megaphone"></i>
</a>



<a href="#" class="btn btn-featured btn-round btn-default">
	<span>FREE WORLWIDE SHIPPING</span>
	<i class="et-megaphone"></i>
</a>

<a href="#" class="btn btn-featured btn-round btn-default">
	<span>FREE WORLWIDE SHIPPING</span>
	<i class="et-megaphone btn-round"></i>
</a>

---

Color 3D Buttons

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

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

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-shadow-1 btn-red">
PURCHASE SMARTY NOW
<span class="block font-lato">Free lifetime update included</span>
</a>

---

Button Reveal

Small Small Small Small Small
Small Small Small Small Small

Medium Medium Medium Medium Medium
Medium Medium Medium Medium Medium

Large Large Large Large Large
Large Large Large Large Large

REVEAL EXTRA LARGE REVEAL EXTRA 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 btn-shadow-1">
<i class="et-megaphone"></i>
<span>Small</span>
</a>
<!-- Bordered Medium -->
<a href="#" class="btn btn-default btn-bordered btn-shadow-1">
<i class="et-megaphone"></i>
<span>Medium</span>
</a>
<!-- Bordered Large -->
<a href="#" class="btn btn-lg btn-default btn-bordered btn-shadow-1">
<i class="et-megaphone"></i>
<span>Large</span>
</a>
<!-- Bordered Extra Large -->
<a href="#" class="btn btn-xlg btn-default btn-bordered btn-shadow-1 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 btn-shadow-1">
<i class="et-megaphone"></i>
<span>Small</span>
</a>
<!-- Bordered Medium -->
<a href="#" class="btn btn-primary btn-shadow-1">
<i class="et-megaphone"></i>
<span>Medium</span>
</a>
<!-- Bordered Large -->
<a href="#" class="btn btn-lg btn-primary btn-shadow-1">
<i class="et-megaphone"></i>
<span>Large</span>
</a>
<!-- Bordered Extra Large -->
<a href="#" class="btn btn-xlg btn-primary btn-shadow-1 fs-20">
TRY SMARTY DEMO
<span class="block font-lato">30 days demo for free</span>
</a>