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.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

BUTTONS

  1. Home
  2. Shortcodes
  3. Buttons

SHORTCODES

Show Code 
<!-- 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.

Show Code 

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

Show Code 
<-- 
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

Show Code 
<-- 
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.

         
Show Code 
<-- 
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

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

FREE WORLWIDE SHIPPING
SALE UP TO 70% OFF
GIVEAWAY EVERY WEEK
Show Code 
<!--
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
Show Code 
<!--
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
Show Code 
<!--
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
Show Code 
<!--
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
Show Code 
<!-- 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
Show Code 
<!-- 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
Show Code 
<!-- 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

Sign in with App.net Sign in with Bitbucket Sign in with Dropbox Sign in with Facebook Sign in with Flickr Sign in with Foursquare Sign in with GitHub Sign in with Google Sign in with Instagram Sign in with LinkedIn
Sign in with Microsoft Sign in with OpenID Sign in with Pinterest Sign in with Reddit Sign in with SoundCloud Sign in with Tumblr Sign in with Twitter Sign in with Vimeo Sign in with VK Sign in with Yahoo!
Show Code 
<!-- 
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

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