Buttons

Colors

Pages buttons use the same contextual classes introduced in Bootstrap

<button class="btn btn-primary btn-cons">Primary</button>
<button class="btn btn-info btn-cons">Info</button>
<button class="btn btn-danger btn-cons">Danger</button>
<button class="btn btn-default btn-cons">Default</button>

Button animation

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>

Default Dropdown

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>

Tag Options

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>

Rounded buttons

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>