1. Home
  2. UI Elements
  3. Buttons

UI Elements > Buttons

  • My Income $47,171
  • Site Traffic  45%
  • Site Orders  2447

Basic Buttons

The icons below are the most basic ones, without any icons or additional css applied to it

Buttons come in 6 different default color sets .btn .btn-* .btn-default, .btn-primary, .btn-success... etc

Default Primary Success Info Warning Danger Disabled Link

Button Sizes

Large buttons to attract call to action .btn .btn-lg

Large button Large button

The Default button .btn .btn-default

Default button Default button

Small button for elegance .btn .btn-sm

Small button Small button

Extra small button for added info .btn .btn-xs

Mini button Mini button

Circle Buttons

Extra Large round buttons .btn-circle .btn-xl

Large round buttons .btn-circle .btn-lg

Default round buttons .btn-circle

Drop Down buttons

Button group with dropup/dropdown toggle .btn-group

Default button dropdowns .dropdown-toggle

Smaller button dropdowns .btn-sm .dropdown-toggle

Extra small button dropdowns .btn-xs .dropdown-toggle

Multiple Level Dropdown New!

Custom created Multiple Level dropdown that works with ease! Simply use the class .dropdown-menu .multi-level

Multi Level

Button Groups

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group .

Horizontal Group With Icons Multiple Button Groups

Make a set of buttons appear vertically stacked rather than horizontally by putting it in .btn-group-vertical .

Vertical Group With Dropdown With Icons Multiple Button Groups

Mix and match colors

Custom buttons with core CSS elements. Mix and match existing classes to come up with unique style buttons. For example: .btn .bg-color-blueLight .txt-color-white

Mix and match colors

Custom text colors can also be applied For example: .txt-color-red

Mix and match color with backgrounds .btn .bg-color-blueLight .txt-color-magenta

Button with icons

Default buttons have a single line of text with or without one or two icons aligned left or right.

Label Buttons 

<button type="button" class="btn btn-labeled btn-success">
 <span class="btn-label">
  <i class="glyphicon glyphicon-ok"></i>
 </>Success
</button>

Block Buttons

Block buttons .btn .btn-block

Block group buttons .btn-group .btn-group-justified

Left Middle Right