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>
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 RIGHTVertical FAB
Menu direction DOWNVertical FAB
Menu direction UPHorizontal FAB
Menu direction LEFTButton 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>
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>
