Pages buttons use the same contextual classes introduced in Bootstrap
<button class="btn btn-primary btn-cons">Primary</button><button class="btn btn-success btn-cons">Success</button><button class="btn btn-complete btn-cons">Complete</button><button class="btn btn-info btn-cons">Info</button><button class="btn btn-warning btn-cons">Warning</button><button class="btn btn-danger btn-cons">Danger</button>
Content inside a button can be animate on hover. Simply include the classes .btn-animated
together with .from-top
or .from-left
to specify the animation direction, followed by the desired icon font class name (ex: fa fa-check
)
<button class="btn btn-primary btn-animated from-left fa fa-check" type="button"><span>Checkbox</span></button><button class="btn btn-primary btn-animated from-top pg pg-clock" type="button"><span>Clock</span></button>
Tired of seeing the standard Bootstrap dropdown? Wrap your dropdown toggle button and dropdown menu within .dropdown-default
to get a modern and clean feel
<div class="btn-group dropdown-default"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a><ul class="dropdown-menu "><li><a href="#">Arial</a></li><li><a href="#">Helvetica</a></li><li><a href="#">SegeoUI</a></li></ul></div><!-- Upside dropdown --><div class="btn-group dropdown-default dropup"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a><ul class="dropdown-menu "><li><a href="#">Arial</a></li><li><a href="#">Helvetica</a></li><li><a href="#">SegeoUI</a></li></ul></div>
Add .btn-tag
followed by .btn-tag-light
or .btn-tag-dark
to have tag options with color variations for buttons. Additionally, rounded tags can be achieved by adding .btn-tag-rounded
<!-- Tag with a light background --><button class="btn btn-tag btn-tag-light m-r-20">Link me</button><!-- Tag with a dark background --><button class="btn btn-tag btn-tag-dark">Link me</button><!-- Rounded tag with a light background --><button class="btn btn-tag btn-tag-light btn-tag-rounded m-r-20">Link me</button><!-- Rounded tag with a dark background --><button class="btn btn-tag btn-tag-dark btn-tag-rounded">Link me</button>
Any button can be made to have rounded corners by adding .btn-rounded
<!-- Large rounded button --><button class="btn btn-lg btn-rounded">Large rounded</button>​<!-- Regular rounded button --><button class="btn btn-rounded">Regular</button>​<!-- Small rounded button --><button class="btn btn-sm btn-rounded">Small</button>