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
General Buttons
Button with outline
Rounded Buttons
Rounded Outline Buttons
Button with icon
Button with Dropdown
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
Action Another action Something else here
Separated link

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

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

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.

With rounded buttons

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

Different colors

Mix and match with various background colors. Use base class .btn and add any available .bg-* class

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

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

Button Addon

With dropdown

Action Another action Something else here
Separated link

Normal

Flat