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>