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
)
example :
<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
example :
<!-- 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
example :
<!-- 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>