Smarty Admin

BUTTONS

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

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>