Buttons

Flat Buttons

Use class .btn-flat for flat buttons.

Primary Success Info Warning Danger Link

Flat Button groups

Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here

Basic buttons

Secondary Primary Success Info Warning Danger

Buttons with Shadow .shadow-z-2

Secondary Primary Success Info Warning Danger

Round buttons

Use .btn-round class for round buttons.

Secondary Primary Success Info Warning Danger

Round Buttons with Shadow .shadow-z-2

Secondary Primary Success Info Warning Danger

Gradient buttons

Button .gradient-green-tea
Button .gradient-plum
Button .gradient-flickr
Button .gradient-blue-grey-blue
Button .gradient-man-of-steel
Button .gradient-indigo-blue

Gradient Button With Shadow

Buttons with Shadow .shadow-z-1-hover
Buttons with Shadow .shadow-z-4
Buttons with Shadow .big-shadow
Buttons with Shadow .shadow-big-navbar
Buttons with Shadow .sidebar-shadow
Buttons with Shadow .card-shadow

Button groups

Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here

Round Button groups

Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here

Button sizes

Use class .btn-lg for large button.

Large button Large button

Default button

Default button Default button

Use class .btn-sm for Small button.

Small button Small button

Round Button sizes

Use class .btn-lg for large button.

Large button Large button

Default button

Default button Default button

Use class .btn-sm for Small button.

Small button Small button

Floating action buttons a.k.a fab

Use .btn-fab class with button classes for floating buttons.

Use .btn-sm classes for small floating buttons.

Vertical Button Groups

Use .btn-group-vertical class for vertical button group.

Button Button Button Button
Button Button Button Button

Justified Button Groups

Left Middle Right

btn-group.btn-group-justified

Left Middle Right

Use .btn-COLOR class for colored buttons for colored buttons.

Left Middle Right

disabled btn-group.btn-group-justified

Left Right

Dropdown with button group

Left Middle Right

Use btn-group.btn-group-justified.btn-round class for round button group.

Left Right

Dropdown with round button group

Block Button

For raised block button, use .btn-block.btn-raised classes.
Block buttons can be used with diffrent size classes too.

Block level button Block level button Block level button Block level button
Block level button disabled

Button Toolbar

To create button toolbar, use .btn-toolbar class as wrapper of .btn-group class.

1 2 3
4 5 6
7
1 2 3
4 5 6
7
1 2 3
4 5 6
7
1 2 3
4 5 6
7

Round Button Toolbar

To create round button toolbar, use .btn-round class.

1 2 3
4 5 6
7
1 2 3
4 5 6
7
1 2 3
4 5 6
7
1 2 3
4 5 6
7
Outline Buttons

Use .btn-outline-COLOR class for outline buttons.

Outline Buttons

Primary Success Info Warning Danger
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here

Round outline Buttons

Primary Success Info Warning Danger
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here
Action Another Action Something else is here

Floating Buttons

Block Buttons

Block button Block button

Vertical Buttons

Button Button Button

Outline Button Groups

Left Middle Right

Left Middle Right

Round Outline Button Groups

Left Middle Right

Left Middle Right

Outline Toolbar Buttons

1 2 3
4 5 6
7
1 2 3
4 5 6
7

Round Outline Toolbar Buttons

1 2 3
4 5 6
7
1 2 3
4 5 6
7
Social Media Buttons

Basic Social Buttons

Use .btn-social class with .btn-SOCIAL_NAME class like .btn-facebook for social buttons with icons.

App.net Bitbucket Dropbox Facebook Flickr Foursquare GitHub Google Instagram LinkedIn

Round Social Buttons

Use .btn-social class with .btn-SOCIAL_NAME class like .btn-facebook for social buttons with icons.

App.net Bitbucket Dropbox Facebook Flickr Foursquare GitHub Google Instagram LinkedIn

Social Outline Buttons

Use .btn-outline-SOCIAL_NAME class like .btn-outline-facebook for social outline buttons.

App.net Bitbucket Dropbox Facebook Flickr Foursquare GitHub Google Instagram LinkedIn Microsoft Odnoklassniki OpenID Pinterest Reddit SoundCloud Tumblr Twitter Vimeo VK Yahoo!

Social Round Outline Buttons

Use .btn-outline-SOCIAL_NAME class like .btn-outline-facebook for social outline buttons.

App.net Bitbucket Dropbox Facebook Flickr Foursquare GitHub Google Instagram LinkedIn Microsoft Odnoklassniki OpenID Pinterest Reddit SoundCloud Tumblr Twitter Vimeo VK Yahoo!

Flat Social Buttons

Use .btn-SOCIAL_NAME-flat class like .btn-facebook-flat class for flat social buttons.

App.net Bitbucket Dropbox Facebook Flickr Foursquare GitHub Google Instagram LinkedIn Microsoft Odnoklassniki OpenID Pinterest Reddit SoundCloud Tumblr Twitter Vimeo VK Yahoo!

Social Icon Buttons

Use .btn-social-icon class for social icon buttons.

Round Social Icon Buttons

Use .btn-round class for round buttons.

Social Icon Outline Buttons

Social Icon Round Outline Buttons

Social Block Buttons