Flat Buttons

Flat buttons are used for basic functions and usually used for actions within a card or modal so there aren't too many overlapping shadows.


                        <!-- Markup for Flat Buttons-->
                        <a href="javascript:void(0)" class="btn btn-default btn-flat">Default</a>
                        <a href="javascript:void(0)" class="btn btn-primary btn-flat">Primary</a>
                        <a href="javascript:void(0)" class="btn btn-green btn-flat">Success</a>
                        <a href="javascript:void(0)" class="btn btn-info btn-flat">Info</a>
                        <a href="javascript:void(0)" class="btn btn-warning btn-flat">Warning</a>
                        <a href="javascript:void(0)" class="btn btn-danger btn-flat">Danger</a>
                      
Default Primary Success Info Warning Danger

Raised Buttons

Raised buttons are used to add dimension and emphasizes important functions.


                        <!-- Markup for Raised Buttons-->
                        <button class="btn btn-default">Default</button>
                        <button class="btn btn-primary">Primary</button>
                        <button class="btn btn-info">Info</button>
                        <button class="btn btn-green">Success</button>
                        <button class="btn btn-warning">Warning</button>
                        <button class="btn btn-danger">Danger</button>
                      

Floating Buttons

Raised buttons are used to add dimension and emphasizes important functions.


                        <!-- Markup for Floating Buttons-->
                        <button class="btn btn-default btn-fab"><i class="zmdi zmdi-more-vert"></i></button>
                        <button class="btn btn-primary btn-fab"><i class="zmdi zmdi-plus"></i></button>
                        <button class="btn btn-info btn-fab"><i class="zmdi zmdi-edit"></i></button>
                        <button class="btn btn-green btn-fab"><i class="zmdi zmdi-check-all"></i></button>
                        <button class="btn btn-warning btn-fab"><i class="zmdi zmdi-search"></i></button>
                        <button class="btn btn-danger btn-fab"><i class="zmdi zmdi-apps"></i></button>
                        <!-- Markup for Floating Mini Buttons-->
                        <button class="btn btn-default btn-fab btn-fab-sm"><i class="zmdi zmdi-more-vert"></i></button>
                        <button class="btn btn-primary btn-fab btn-fab-sm"><i class="zmdi zmdi-plus"></i></button>
                        <button class="btn btn-info btn-fab btn-fab-sm"><i class="zmdi zmdi-edit"></i></button>
                        <button class="btn btn-green btn-fab btn-fab-sm"><i class="zmdi zmdi-check-all"></i></button>
                        <button class="btn btn-warning btn-fab btn-fab-sm"><i class="zmdi zmdi-search"></i></button>
                        <button class="btn btn-danger btn-fab btn-fab-sm"><i class="zmdi zmdi-apps"></i></button>
                      

Default

Small

Floating Action Buttons

Raised buttons are used to add dimension and emphasizes important functions.


                        <a href="javascript:void(0)" class="btn btn-default btn-flat">Default</a>
                        <a href="javascript:void(0)" class="btn btn-primary btn-flat">Primary</a>
                        <a href="javascript:void(0)" class="btn btn-green btn-flat">Success</a>
                        <a href="javascript:void(0)" class="btn btn-info btn-flat">Info</a>
                        <a href="javascript:void(0)" class="btn btn-warning btn-flat">Warning</a>
                        <a href="javascript:void(0)" class="btn btn-danger btn-flat">Danger</a>
                      

Horizontal FAB

Menu direction RIGHT

Vertical FAB

Menu direction DOWN

Vertical FAB

Menu direction UP

Horizontal FAB

Menu direction LEFT

Button Sizes

Raised buttons are used to add dimension and emphasizes important functions.


                        <!-- Markup for Button Sizes-->
                        <button class="btn btn-primary btn-lg">Large Button</button>
                        <button class="btn btn-primary">Default Button</button>
                        <button class="btn btn-primary btn-sm">Small Button</button>
                        <button class="btn btn-primary btn-xs">Tiny Button</button>
                      

Button Styles

Raised buttons are used to add dimension and emphasizes important functions.


                        <!-- Markup for Button Styles-->
                        <button class="btn btn-primary">Default</button>
                        <button class="btn btn-primary btn-round">Round</button>
                        <button class="btn btn-primary"><i class="zmdi zmdi-favorite"></i> With Icon</button>
                        <button class="btn btn-primary btn-flat">Flat</button>
                      

Social Media Buttons

Raised buttons are used to add dimension and emphasizes important functions.


                        <a href="javascript:void(0)" class="btn btn-default btn-flat">Default</a>
                        <a href="javascript:void(0)" class="btn btn-primary btn-flat">Primary</a>
                        <a href="javascript:void(0)" class="btn btn-green btn-flat">Success</a>
                        <a href="javascript:void(0)" class="btn btn-info btn-flat">Info</a>
                        <a href="javascript:void(0)" class="btn btn-warning btn-flat">Warning</a>
                        <a href="javascript:void(0)" class="btn btn-danger btn-flat">Danger</a>
                      

Default

Circle

Flat

Button Groups

Raised buttons are used to add dimension and emphasizes important functions.


                        <a href="javascript:void(0)" class="btn btn-default btn-flat">Default</a>
                        <a href="javascript:void(0)" class="btn btn-primary btn-flat">Primary</a>
                        <a href="javascript:void(0)" class="btn btn-green btn-flat">Success</a>
                        <a href="javascript:void(0)" class="btn btn-info btn-flat">Info</a>
                        <a href="javascript:void(0)" class="btn btn-warning btn-flat">Warning</a>
                        <a href="javascript:void(0)" class="btn btn-danger btn-flat">Danger</a>
                      

Basic Example

Button Group Sizing

Justified Button Groups

Nesting

Block Level Buttons

Create block level buttons by adding .btn-block


                        <a href="javascript:void(0)" class="btn btn-default btn-flat">Default</a>
                        <a href="javascript:void(0)" class="btn btn-primary btn-flat">Primary</a>
                        <a href="javascript:void(0)" class="btn btn-green btn-flat">Success</a>
                        <a href="javascript:void(0)" class="btn btn-info btn-flat">Info</a>
                        <a href="javascript:void(0)" class="btn btn-warning btn-flat">Warning</a>
                        <a href="javascript:void(0)" class="btn btn-danger btn-flat">Danger</a>
                      
Default Primary info

Split button dropdown

Create block level buttons by adding .btn-block


                        <div class="btn-group">
                        <button type="button" class="btn btn-default">Action</button>
                        <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-default">
                        <span class="caret"></span>
                        <span class="sr-only">default</span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        </ul>
                        </div>
                        <div class="btn-group">
                        <button type="button" class="btn btn-primary">Action</button>
                        <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-primary">
                        <span class="caret"></span>
                        <span class="sr-only">primary</span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        </ul>
                        </div>
                        <div class="btn-group">
                        <button type="button" class="btn btn-green">Action</button>
                        <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-green">
                        <span class="caret"></span>
                        <span class="sr-only">success</span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        </ul>
                        </div>
                        <div class="btn-group">
                        <button type="button" class="btn btn-info">Action</button>
                        <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-info">
                        <span class="caret"></span>
                        <span class="sr-only">info</span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        </ul>
                        </div>
                        <div class="btn-group">
                        <button type="button" class="btn btn-warning">Action</button>
                        <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-warning">
                        <span class="caret"></span>
                        <span class="sr-only">warning</span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        </ul>
                        </div>
                        <div class="btn-group">
                        <button type="button" class="btn btn-danger">Action</button>
                        <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-danger">
                        <span class="caret"></span>
                        <span class="sr-only">danger</span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        </ul>
                        </div>
                      

Hey Mike, we have funding for our new project!

Awesome! Photo booth banh mi pitchfork kickstarter whatever, prism godard ethical 90's cray selvage.

Artisan glossier vaporware meditation paleo humblebrag forage small batch.

Bushwick letterpress vegan craft beer dreamcatcher kickstarter.