WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com
<!-- Default -->
<button type="button" class="btn btn-default">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-xs for additional sizes.


<!-- 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-xs">Extra 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 <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="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-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">
<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="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-default
-->

<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="divider"></li>
<li><a href="#"><i class="fa fa-cogs"></i> Separated link</a></li>
</ul>
</div>

3D Buttons

<!-- 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>

Button Reveal

Extra Small Extra Small Extra Small Extra Small Extra Small

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

-->

<!-- Extra Small -->
<a href="#" class="btn btn-3d btn-xs btn-reveal btn-red">
<i class="et-megaphone"></i>
<span>Small</span>
</a>
<!-- 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

EXTRA SMALL SMALL MEDIUM LARGE
TRY SMARTY DEMO 30 days demo for free
<!-- Bordered Extra Small -->
<a href="#" class="btn btn-xs btn-default btn-bordered">
<i class="et-megaphone"></i>
<span>Extra Small</span>
</a>
<!-- 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 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-xs 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>
Need help with your Account? 30 days demo for free
<!-- BUTTON CALLOUT -->
<a href="#" class="btn btn-xlg btn-primary size-20 fullwidth nomargin bopadding noradius">
	<span class="font-lato size-30">Need help with your Account?</span>
	<span class="block font-lato">30 days demo for free</span>
</a>
<!-- /BUTTON CALLOUT -->

Social Buttons

<!-- 
Available Sizes:

	.btn-xs
	.btn-sm
	.btn-lg
 -->


<a class="btn btn-block btn-social btn-adn">
	<i class="fa fa-adn"></i> Sign in with App.net
</a>

<a class="btn btn-block btn-social btn-bitbucket">
	<i class="fa fa-bitbucket"></i> Sign in with Bitbucket
</a>

<a class="btn btn-block btn-social btn-dropbox">
	<i class="fa fa-dropbox"></i> Sign in with Dropbox
</a>

<a class="btn btn-block btn-social btn-facebook">
	<i class="fa fa-facebook"></i> Sign in with Facebook
</a>

<a class="btn btn-block btn-social btn-flickr">
	<i class="fa fa-flickr"></i> Sign in with Flickr
</a>

<a class="btn btn-block btn-social btn-foursquare">
	<i class="fa fa-foursquare"></i> Sign in with Foursquare
</a>

<a class="btn btn-block btn-social btn-github">
	<i class="fa fa-github"></i> Sign in with GitHub
</a>

<a class="btn btn-block btn-social btn-google">
	<i class="fa fa-google-plus"></i> Sign in with Google
</a>

<a class="btn btn-block btn-social btn-instagram">
	<i class="fa fa-instagram"></i> Sign in with Instagram
</a>

<a class="btn btn-block btn-social btn-linkedin">
	<i class="fa fa-linkedin"></i> Sign in with LinkedIn
</a>

<a class="btn btn-block btn-social btn-microsoft">
	<i class="fa fa-windows"></i> Sign in with Microsoft
</a>

<a class="btn btn-block btn-social btn-openid">
	<i class="fa fa-openid"></i> Sign in with OpenID
</a>

<a class="btn btn-block btn-social btn-pinterest">
	<i class="fa fa-pinterest"></i> Sign in with Pinterest
</a>

<a class="btn btn-block btn-social btn-reddit">
	<i class="fa fa-reddit"></i> Sign in with Reddit
</a>

<a class="btn btn-block btn-social btn-soundcloud">
	<i class="fa fa-soundcloud"></i> Sign in with SoundCloud
</a>

<a class="btn btn-block btn-social btn-tumblr">
	<i class="fa fa-tumblr"></i> Sign in with Tumblr
</a>

<a class="btn btn-block btn-social btn-twitter">
	<i class="fa fa-twitter"></i> Sign in with Twitter
</a>

<a class="btn btn-block btn-social btn-vimeo">
	<i class="fa fa-vimeo-square"></i> Sign in with Vimeo
</a>

<a class="btn btn-block btn-social btn-vk">
	<i class="fa fa-vk"></i> Sign in with VK
</a>

<a class="btn btn-block btn-social btn-yahoo">
	<i class="fa fa-yahoo"></i> Sign in with Yahoo!
</a>

Translucid Buttons

To be used on color background

<!-- Extra Small -->
<button type="button" class="btn btn-block btn-xs btn-translucid">Translucid</button>

<!-- Default -->
<button type="button" class="btn btn-block btn-translucid">Translucid</button>

<!-- Large -->
<button type="button" class="btn btn-block btn-lg btn-translucid">Translucid</button>

<!-- Extra Large-->
<button type="button" class="btn btn-block btn-xlg btn-translucid">TRANSLUCID LARGE</button>