#
Buttons
#
Colors
Pages buttons use the same contextual classes introduced in Bootstrap
<button className="btn btn-primary">Primary</button>
<button className="btn btn-success">Success</button>
<button className="btn btn-complete">Complete</button>
<button className="btn btn-info">Info</button>
<button className="btn btn-warning">Warning</button>
<button className="btn btn-danger">Danger</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, You can wish to have any icon you want in side the hidden-block
div
<button
aria-label=""
type="button"
className="btn btn-primary btn-cons btn-animated from-left"
>
<span>Follow us</span>
<span className="hidden-block">
<i className="pg-icon">mail</i>
</span>
</button>
<button
aria-label=""
type="button"
className="btn btn-primary btn-cons btn-animated from-top"
>
<span>Download</span>
<span className="hidden-block">
<i className="pg-icon">cloud</i>
</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 className="btn-group dropdown-default">
<a className="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span className="caret"></span> </a>
<ul className="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 className="btn-group dropdown-default dropup">
<a className="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span className="caret"></span> </a>
<ul className="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 className="btn btn-tag btn-tag-light m-r-20">Link me</button>
// Tag with a dark background
<button className="btn btn-tag btn-tag-dark">Link me</button>
// Rounded tag with a light background
<button className="btn btn-tag btn-tag-light btn-tag-rounded m-r-20">Link me</button>
// Rounded tag with a dark background
<button className="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 className="btn btn-lg btn-rounded">Large rounded</button>
// Regular rounded button
<button className="btn btn-rounded">Regular</button>
// Small rounded button
<button className="btn btn-sm btn-rounded">Small</button>