Colors buttons
Use any of the available button classes to quickly create a styled button.
.btn-default, .btn-primary, .btn-success e.t.c..
Normal buttons
Different size
If You want larger or smaller buttons You can add .btn-lg
,
.btn-sm
, or .btn-xs
class.
Button Sizes
Outline and Block Buttons
Create block level buttons or outline buttons, by adding
.btn-block
or .btn-outline
.
Outline buttons
Block buttons
Button dropdowns
Droppdowns buttons are available with any color and any size.
Dropdowns
<h6 class="font-bold">Dropdowns</h6>
<div class="btn-group">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Primary
<span class="fa fa-angle-down"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
Dropdowns Buttons With Icon
Dropdowns Outline
Grouped Buttons
This is a group of buttons, ideal for sytuation where many actions are related to same element.
Button Group
Button Group Outline
<h6 class="font-bold">Button Group</h6>
<div class="btn-group">
<button class="btn btn-white" type="button">Left</button>
<button class="btn btn-primary" type="button">Middle</button>
<button class="btn btn-white" type="button">Right</button>
</div>
<br>
<br>
<h6 class="font-bold">Button Group Outline</h6>
<div class="btn-group">
<button class="btn btn-outline btn-white" type="button">Left</button>
<button class="btn btn-outline btn-info" type="button">Middle</button>
<button class="btn btn-outline btn-white" type="button">Right</button>
</div>
Icon Buttons
To buttons with any color or any size you can add extra icon on the left or the right side.
Common Icon Buttons
Toggle buttons Variations
Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens
<h6 class="font-bold">Common Icon Buttons</h6>
<p>
<button class="btn btn-primary " type="button"><i class="fa fa-check"></i> Submit</button>
<button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span class="bold">Upload</span></button>
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> Edit</button>
<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">Warning</span></button>
<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i> Map</button>
<a class="btn btn-white">
<i class="fa fa-user-md"></i>
</a>
<a class="btn btn-white">
<i class="fa fa-users"></i>
</a>
<a class="btn btn-white">
<i class="fa fa-wrench"></i>
</a>
<a class="btn btn-white">
<i class="fa fa-exchange"></i>
</a>
<a class="btn btn-white">
<i class="fa fa-check-circle"></i>
</a>
<a class="btn btn-white">
<i class="fa fa-road"></i>
</a>
<a class="btn btn-white">
<i class="fa fa-ambulance"></i>
</a>
<a class="btn btn-white">
<i class="fa fa-star"></i> Stared
</a>
</p>
<div class="space"></div>
<hr>
<h6 class="font-bold">Toggle buttons Variations</h6>
<p>Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens</p>
<button data-toggle="button" class="btn btn-primary btn-outline" type="button">Single Toggle</button>
<button data-toggle="button" class="btn btn-primary" type="button">Single Toggle</button>
<div data-toggle="buttons-checkbox" class="btn-group">
<button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> Bold</button>
<button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> Underline</button>
<button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> Italic</button>
</div>
Circle Icon Buttons
For buttons you can add .btn-circle
to rounded buttons and make it circle.
Circle buttons
Circle Gradient Color buttons
<p>
For buttons you can add <code>.btn-circle</code> to rounded buttons and make it circle.
</p>
<h6 class="font-bold">Circle buttons</h6>
<br>
<button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
</button>
<button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
</button>
<button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
</button>
<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
</button>
<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
</button>
<button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
</button>
<button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i></button>
<br>
<br>
<button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i></button>
<button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i></button>
<button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i></button>
<button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i></button>
<button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i></button>
<button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i></button>
<button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i></button>
<br>
<br>
<h6 class="font-bold">Circle Gradient Color buttons</h6>
<br>
<br>
<button class="btn btn-gradient-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i></button>
<button class="btn btn-gradient-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i></button>
<button class="btn btn-gradient-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i></button>
<button class="btn btn-gradient-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i></button>
<button class="btn btn-gradient-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i></button>
<button class="btn btn-gradient-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i></button>
<button class="btn btn-gradient-danger-outline btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i></button>
Rounded Buttons
You can also add .btn-rounded
class to round buttons.
Button Group
Default
Primary
Success
Info
Warning
Danger
Danger
Default
Primary
Success
Info
Warning
Danger
Danger
Block rounded with icon button
Block rounded gradient color with icon button
<p>
You can also add <code>.btn-rounded</code> class to round buttons.
</p>
<h6 class="font-bold">Button Group</h6>
<p>
<a class="btn btn-default btn-rounded" href="#">Default</a>
<a class="btn btn-primary btn-rounded" href="#">Primary</a>
<a class="btn btn-success btn-rounded" href="#">Success</a>
<a class="btn btn-info btn-rounded" href="#">Info</a>
<a class="btn btn-warning btn-rounded" href="#">Warning</a>
<a class="btn btn-danger btn-rounded" href="#">Danger</a>
<a class="btn btn-danger btn-rounded btn-outline" href="#">Danger</a>
<br>
<br>
<a class="btn btn-gradient-default btn-rounded" href="#">Default</a>
<a class="btn btn-gradient-primary btn-rounded" href="#">Primary</a>
<a class="btn btn-gradient-success btn-rounded" href="#">Success</a>
<a class="btn btn-gradient-info btn-rounded" href="#">Info</a>
<a class="btn btn-gradient-warning btn-rounded" href="#">Warning</a>
<a class="btn btn-gradient-danger btn-rounded" href="#">Danger</a>
<a class="btn btn-gradient-danger-outline btn-rounded" href="#">Danger</a>
<br>
<br>
<a class="btn btn-primary btn-rounded btn-block" href="#"><i class="fa fa-info-circle"></i> Block rounded with icon button</a>
<a class="btn btn-gradient-primary btn-rounded btn-block" href="#"><i class="fa fa-info-circle"></i> Block rounded gradient color with icon button</a>
Bootstrap Button Custom Bright Color With Icon
Bootstrap Button Custom Gradient Color With Icon
Layout Theme Color Buttons
Bootstrap Button With Icon
Bootstrap Button Sizes
Bootstrap Button Groups
Vertical Button Groups
Standard Icon Button Group
All available 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!Icons only version
Available css social color class
Class name | Service |
---|---|
btn-adn |
App.net |
btn-bitbucket |
Bitbucket |
btn-dropbox |
Dropbox |
btn-facebook |
|
btn-flickr |
Flickr |
btn-foursquare |
Foursquare |
btn-github |
Github |
btn-google |
|
btn-instagram |
Istagram |
btn-linkedin |
|
btn-microsoft |
Microsoft |
btn-openid |
OpenID |
btn-pinterest |
|
btn-reddit |
|
btn-soundcloud |
Soundcloud |
btn-tumblr |
Tumblr |
btn-twitter |
|
btn-vimeo |
Vimeo |
btn-vk |
VK |
btn-yahoo |
Yahoo |