Buttons UI

  1. Home
  2. UI
  3. Buttons

Buttons

Various types of buttons. Using the base class .btn

Normal
Large .btn-lg
Small .btn-sm
X-Small .btn-xs
Flat .btn-flat
Disabled .disabled

Horizontal Button Group

Horizontal button groups are easy to create with bootstrap. Just add your buttons inside <div class="btn-group"></div>

Button Icons Dropdown
Action Another action Something else here
Separated link

Social buttons Icon with Name

Use a classes btn btn-social btn-bitbucket / < class="fa fa-bitbucket"></i> to quickly create a General btn.

Social buttons Icon

Use a classes btn btn-social-icon btn-bitbucket to quickly create a General btn.

With Circle buttons

Use a classes btn btn-social-icon btn-circle to quickly create a General btn.

Split buttons

Normal split buttons:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Flat split buttons:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Vertical Button Group

Vertical button groups are easy to create with bootstrap. Just add your buttons inside <div class="btn-group-vertical"></div>

Button Icons Dropdown
Action Another action Something else here
Separated link

Application Buttons

Add the classes .btn.btn-app to an <a> tag to achieve the following:

Edit Play Pause Stop Repeat Save 12 Notifications 41 Users 45 Orders 2 Inbox 48 Products 31 Likes

Button Addon

With dropdown

Action Another action Something else here
Separated link

Normal

Flat