Button Library

Flat Buttons

<a href="#" class="button button-tiny">Go</a>
<a href="#" class="button button-rounded button-tiny">Go</a>
<a href="#" class="button button-pill button-tiny">Go</a>
<button class="button button-square button-tiny"><i class="fa fa-plus"></i></button>
<button class="button button-box button-tiny"><i class="fa fa-plus"></i></button>
<button class="button button-circle button-tiny"><i class="fa fa-plus"></i></button>

<a href="#" class="button button-primary button-small">Go</a>
<a href="#" class="button button-primary button-rounded button-small">Go</a>
<a href="#" class="button button-primary button-pill button-small">Go</a>
<button class="button button-primary button-square button-small"><i class="fa fa-plus"></i></button>
<button class="button button-primary button-box button-small"><i class="fa fa-plus"></i></button>
<button class="button button-primary button-circle button-small"><i class="fa fa-plus"></i></button>

<a href="#" class="button button-action">Go</a>
<a href="#" class="button button-action button-rounded">Go</a>
<a href="#" class="button button-action button-pill">Go</a>
<button class="button button-action button-square"><i class="fa fa-plus"></i></button>
<button class="button button-action button-box"><i class="fa fa-plus"></i></button>
<button class="button button-action button-circle"><i class="fa fa-plus"></i></button>

<a href="#" class="button button-highlight button-large">Go</a>
<a href="#" class="button button-highlight button-rounded button-large">Go</a>
<a href="#" class="button button-highlight button-pill button-large">Go</a>
<button class="button button-highlight button-square button-large"><i class="fa fa-plus"></i></button>
<button class="button button-highlight button-box button-large"><i class="fa fa-plus"></i></button>
<button class="button button-highlight button-circle button-large"><i class="fa fa-plus"></i></button>

<a href="#" class="button button-caution button-jumbo">Go</a>
<a href="#" class="button button-caution button-rounded button-jumbo">Go</a>
<a href="#" class="button button-caution button-pill button-jumbo">Go</a>
<button class="button button-caution button-square button-jumbo"><i class="fa fa-plus"></i></button>
<button class="button button-caution button-box button-jumbo"><i class="fa fa-plus"></i></button>
<button class="button button-caution button-circle button-jumbo"><i class="fa fa-plus"></i></button>

<a href="#" class="button button-royal button-giant">Go</a>
<a href="#" class="button button-royal button-rounded button-giant">Go</a>
<a href="#" class="button button-royal button-pill button-giant">Go</a>
<button class="button button-royal button-square button-giant"><i class="fa fa-plus"></i></button>
<button class="button button-royal button-box button-giant"><i class="fa fa-plus"></i></button>
<button class="button button-royal button-circle button-giant"><i class="fa fa-plus"></i></button>

Glow Buttons

<a href="#" class="button button-glow button-rounded button-raised button-primary">Go</a>
<a href="#" class="button button-glow button-border button-rounded button-primary">Go</a>
<button class="button button-glow button-circle button-action button-jumbo"><i class="fa fa-thumbs-up"></i></button>
<a href="#" class="button button-glow button-rounded button-highlight">Go</a>
<a href="#" class="button button-glow button-rounded button-caution">Go</a>
<a href="#" class="button button-glow button-rounded button-royal">Go</a>

3d Buttons

<button class="button button-3d button-box button-jumbo"><i class="fa fa-thumbs-up"></i></button>
<a href="#" class="button button-3d button-primary button-rounded">Check out the new site!</a>
<a href="#" class="button button-3d button-action button-pill">Visit Us!</a>
<button class="button button-3d button-action button-circle button-jumbo"><i class="fa fa-thumbs-up"></i></button>
<a href="#" class="button button-3d button-caution"><i class="fa fa-camera"></i> Go</a>
<a href="#" class="button button-3d button-royal">Say Hi!</a>

Border Buttons

<button class="button button-large button-plain button-border button-circle"><i class="fa fa-reply"></i></button>
<button class="button button-large button-plain button-border button-box"><i class="fa fa-star"></i></button>
<button class="button button-large button-plain button-border button-square"><i class="fa fa-trash-o"></i></button>
<button class="button button-large button-plain button-borderless"><i class="fa fa-tag"></i></button>

Long Shadows

<button class="button button-primary button-box button-giant button-longshadow-right">
	<i class="fa fa-twitter"></i>
</button>

<button class="button button-caution button-box button-raised button-giant button-longshadow">
	<i class="fa fa-google-plus"></i>
</button>

<button class="button button-action button-box button-giant button-longshadow-left">
	<i class="fa fa-share-alt"></i>
</button>

<button class="button button-highlight button-box button-giant button-longshadow-right button-longshadow-expand">
	<i class="fa fa-rss"></i>
</button>

<button class="button button-primary button-circle button-giant button-longshadow">
	<i class="fa fa-gear"></i>
</button>

Button Groups

<div class="button-group">
	<button type="button" class="button button-primary">Option 1</button>
	<button type="button" class="button button-primary">Option 2</button>
	<button type="button" class="button button-primary">Option 3</button>

	<span class="button-dropdown button-dropdown-primary" data-buttons="dropdown">
		<a href="#" class="button button-primary"> Select Me <i class="fa fa-caret-down"></i></a>
		<ul class="button-dropdown-list is-below">
			<li><a href="http://unicorn-ui.com/">Option Link 1</a></li>
			<li><a href="http://unicorn-ui.com/">Option Link 2</a></li>
			<li class="button-dropdown-divider"><a href="#">Option Link 3</a></li>
		</ul>
	</span>
</div>

<div class="button-group">
	<button type="button" class="button button-pill button-action">Option 1</button>
	<button type="button" class="button button-pill button-action">Option 2</button>
	<button type="button" class="button button-pill button-action">Option 3</button>
</div>

<div class="button-group">
	<button type="button" class="button button-royal button-rounded button-raised">Option 1</button>
	<button type="button" class="button button-royal button-rounded button-raised">Option 2</button>
	<button type="button" class="button button-royal button-rounded button-raised">Option 3</button>
</div>

Block Buttons

<a href="#" class="button button-block button-rounded button-primary button-large">press me</a>
<a href="#" class="button button-block button-rounded button-action button-large">press me</a>
<a href="#" class="button button-block button-rounded button-highlight button-large">press me</a>
<a href="#" class="button button-block button-rounded button-caution button-large">press me</a>
<a href="#" class="button button-block button-rounded button-royal button-large">press me</a>

Button Sizes

<a href="#" class="button button-rounded button-flat-primary button-jumbo">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-large">press me</a>
<a href="#" class="button button-rounded button-flat-primary">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-small">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a>

Button Wrappers

Go Go
<span class="button-wrap">
	<button class="button button-circle">
		<i class="fa fa-cloud"></i>
	</button>
</span>

<span class="button-wrap">
	<button class="button button-circle button-raised button-primary">
		<i class="fa fa-cloud"></i>
	</button>
</span>

<span class="button-wrap">
	<a href="#" class="button button-pill ">Go</a>
</span>
<span class="button-wrap">
	<a href="#" class="button button-pill button-raised button-primary">Go</a>
</span>

Raleway Bootstrap 3 Template is what you need for your next project or client.

Buy now

228 Park Ave S New York, NY 10003

info@raleway.com

+11192386513