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

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

Social buttons Icon with Name

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

Sign in with Bitbucket Sign in with Dropbox Sign in with Facebook Sign in with Flickr Sign in with Foursquare Sign in with GitHub Sign in with Google Sign in with Instagram Sign in with LinkedIn Sign in with Tumblr Sign in with Twitter Sign in with VK

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:

Flat split buttons:

Button Addon

With dropdown

Normal

Flat