Please wait...

Buttons

  1. Home
  2. Basic UI

Default Buttons

Use a button classes (eg., btn, btn-default) to quickly create a styled button

Rounded Buttons

Use a button classes (eg., btn, btn-default, btn-rounded) to quickly create a rounded button

Outline Buttons

Use a button classes (eg., btn, btn-default, btn-outline) to quickly create a outline button

Outline Rounded Buttons

Use a button classes (eg., btn, btn-default, btn-outline, btn-rounded) to quickly create a outline rounded button

Disabled Buttons

Use a button classes (eg., btn, btn-default, disabled) to quickly create a Disabled buttons

Material Buttons

Use a button classes (eg., btn, bg-red) etc. to quickly create a material button

Material Rounded Buttons

Use a button classes (eg., btn, bg-red, btn-rounded) etc. to quickly create a material rounded button

Material Disabled Buttons

Use a button classes (eg., btn, bg-red, disabled) etc. to quickly create a material disabled button

Button Sizes

Use a button classes (eg., btn-lg, btn-sm, btn-xs).

Block Buttons

Use a button classes (eg., btn-block).

Button With Icon

You can use icon with button either on the left or the right with different color opitons

Icon Buttons

Make icon buttons.

BUTTON GROUPS

Group a series of buttons together on a single line with the button group

Basic Example

Wrap a series of buttons with .btn in .btn-group.

With Material Design Colors

You can use ( eg., .bg-red class. ) for material design colors

Button Toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Button Group Sizes

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.

Nesting Button Group

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Vertical Button Group

Make a set of buttons appear vertically stacked rather than horizontally.

Justified Button Group

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
LEFT MIDDLE RIGHT
LEFT MIDDLE

SOCIAL BUTTON

Simply use any of social share button with icon or labels.

Social Button In Labels

It is often used at the top of a page or section. An social icon must be with this variation.

Social Icon Button

Make social icon button.