BootStrap Buttons

Default Buttons

default

light

lighter

dark

darker

info

success

warning

danger

neutral

neutral-light

primary

cyanide

meadow

cocktail

mango

berry

hearts

party

midnight

cello

hollow

Small Buttons

default

light

lighter

dark

darker

info

success

warning

danger

neutral

neutral-light

primary

cyanide

meadow

cocktail

mango

berry

hearts

party

midnight

cello

hollow

concrete

Extra Small Buttons

default

light

lighter

dark

darker

info

success

warning

danger

neutral

neutral-light

primary

cyanide

meadow

cocktail

mango

berry

hearts

party

midnight

cello

hollow

concrete

Disabled Class Buttons

default

light

lighter

dark

darker

info

success

warning

danger

neutral

neutral-light

primary

cyanide

meadow

cocktail

mango

berry

hearts

party

midnight

cello

hollow

Using Buttons

<h4>Default Buttons</h4>
<div class="btn-group"><div class="btn btn-default"><i class="fa fa-exclamation-triangle"></i> default</div></div>
<div class="btn btn-light"><i class="fa fa-exclamation-triangle"></i> light</div> 
<div class="btn btn-lighter"><i class="fa fa-exclamation-triangle"></i> lighter</div> 
<div class="btn btn-dark"><i class="fa fa-exclamation-triangle"></i> dark</div> 
<div class="btn btn-darker"><i class="fa fa-exclamation-triangle"></i> darker</div>
<div class="btn btn-info"><i class="fa fa-exclamation-triangle"></i> info</div> 
<div class="btn btn-success"><i class="fa fa-exclamation-triangle"></i> success</div> 
<div class="btn btn-warning"><i class="fa fa-exclamation-triangle"></i> warning</div> 
<div class="btn btn-danger"><i class="fa fa-exclamation-triangle"></i> danger</div> 
<div class="btn btn-neutral"><i class="fa fa-exclamation-triangle"></i> neutral</div> 
<div class="btn btn-neutral-light"><i class="fa fa-exclamation-triangle"></i> neutral-light</div> 
<div class="btn btn-primary"><i class="fa fa-exclamation-triangle"></i> primary</div> 
<div class="btn btn-cyanide"><i class="fa fa-exclamation-triangle"></i> cyanide</div> 
<div class="btn btn-meadow"><i class="fa fa-exclamation-triangle"></i> meadow</div> 
<div class="btn btn-cocktail"><i class="fa fa-exclamation-triangle"></i> cocktail</div> 
<div class="btn btn-mango"><i class="fa fa-exclamation-triangle"></i> mango</div> 
<div class="btn btn-berry"><i class="fa fa-exclamation-triangle"></i> berry</div> 
<div class="btn btn-hearts"><i class="fa fa-exclamation-triangle"></i> hearts</div> 
<div class="btn btn-party"><i class="fa fa-exclamation-triangle"></i> party</div> 
<div class="btn btn-midnight"><i class="fa fa-exclamation-triangle"></i> midnight</div> 
<div class="btn btn-cello"><i class="fa fa-exclamation-triangle"></i> cello</div> 
<div class="btn btn-hollow"><i class="fa fa-exclamation-triangle"></i> hollow</div> 
<h4>Small Buttons</h4>
<div class="btn btn-default btn-sm"><i class="fa fa-exclamation-triangle"></i> default</div> 
<div class="btn btn-light btn-sm"><i class="fa fa-exclamation-triangle"></i> light</div> 
<div class="btn btn-lighter btn-sm"><i class="fa fa-exclamation-triangle"></i> lighter</div> 
<div class="btn btn-dark btn-sm"><i class="fa fa-exclamation-triangle"></i> dark</div> 
<div class="btn btn-darker btn-sm"><i class="fa fa-exclamation-triangle"></i> darker</div>
<div class="btn btn-info btn-sm"><i class="fa fa-exclamation-triangle"></i> info</div> 
<div class="btn btn-success btn-sm"><i class="fa fa-exclamation-triangle"></i> success</div> 
<div class="btn btn-warning btn-sm"><i class="fa fa-exclamation-triangle"></i> warning</div> 
<div class="btn btn-danger btn-sm"><i class="fa fa-exclamation-triangle"></i> danger</div> 
<div class="btn btn-neutral btn-sm"><i class="fa fa-exclamation-triangle"></i> neutral</div> 
<div class="btn btn-neutral-light btn-sm"><i class="fa fa-exclamation-triangle"></i> neutral-light</div> 
<div class="btn btn-primary btn-sm"><i class="fa fa-exclamation-triangle"></i> primary</div> 
<div class="btn btn-cyanide btn-sm"><i class="fa fa-exclamation-triangle"></i> cyanide</div>
<div class="btn btn-meadow btn-sm"><i class="fa fa-exclamation-triangle"></i> meadow</div> 
<div class="btn btn-cocktail btn-sm"><i class="fa fa-exclamation-triangle"></i> cocktail</div> 
<div class="btn btn-mango btn-sm"><i class="fa fa-exclamation-triangle"></i> mango</div> 
<div class="btn btn-berry btn-sm"><i class="fa fa-exclamation-triangle"></i> berry</div> 
<div class="btn btn-hearts btn-sm"><i class="fa fa-exclamation-triangle"></i> hearts</div> 
<div class="btn btn-party btn-sm"><i class="fa fa-exclamation-triangle"></i> party</div> 
<div class="btn btn-midnight btn-sm"><i class="fa fa-exclamation-triangle"></i> midnight</div> 
<div class="btn btn-cello btn-sm"><i class="fa fa-exclamation-triangle"></i> cello</div> 
<div class="btn btn-hollow btn-sm"><i class="fa fa-exclamation-triangle"></i> hollow</div> 
<div class="btn btn-concrete btn-sm"><i class="fa fa-exclamation-triangle"></i> concrete</div>
<h4>Extra Small Buttons</h4>
<div class="btn btn-default btn-xs"><i class="fa fa-exclamation-triangle"></i> default</div> 
<div class="btn btn-light btn-xs"><i class="fa fa-exclamation-triangle"></i> light</div> 
<div class="btn btn-lighter btn-xs"><i class="fa fa-exclamation-triangle"></i> lighter</div> 
<div class="btn btn-dark btn-xs"><i class="fa fa-exclamation-triangle"></i> dark</div> 
<div class="btn btn-darker btn-xs"><i class="fa fa-exclamation-triangle"></i> darker</div>
<div class="btn btn-info btn-xs"><i class="fa fa-exclamation-triangle"></i> info</div> 
<div class="btn btn-success btn-xs"><i class="fa fa-exclamation-triangle"></i> success</div> 
<div class="btn btn-warning btn-xs"><i class="fa fa-exclamation-triangle"></i> warning</div> 
<div class="btn btn-danger btn-xs"><i class="fa fa-exclamation-triangle"></i> danger</div> 
<div class="btn btn-neutral btn-xs"><i class="fa fa-exclamation-triangle"></i> neutral</div> 
<div class="btn btn-neutral-light btn-xs"><i class="fa fa-exclamation-triangle"></i> neutral-light</div> 
<div class="btn btn-primary btn-xs"><i class="fa fa-exclamation-triangle"></i> primary</div> 
<div class="btn btn-cyanide btn-xs"><i class="fa fa-exclamation-triangle"></i> cyanide</div> 
<div class="btn btn-meadow btn-xs"><i class="fa fa-exclamation-triangle"></i> meadow</div> 
<div class="btn btn-cocktail btn-xs"><i class="fa fa-exclamation-triangle"></i> cocktail</div> 
<div class="btn btn-mango btn-xs btn-xs"><i class="fa fa-exclamation-triangle"></i> mango</div> 
<div class="btn btn-berry btn-xs"><i class="fa fa-exclamation-triangle"></i> berry</div>
<div class="btn btn-hearts btn-xs"><i class="fa fa-exclamation-triangle"></i> hearts</div> 
<div class="btn btn-party btn-xs"><i class="fa fa-exclamation-triangle"></i> party</div> 
<div class="btn btn-midnight btn-xs"><i class="fa fa-exclamation-triangle"></i> midnight</div> 
<div class="btn btn-cello btn-xs"><i class="fa fa-exclamation-triangle"></i> cello</div> 
<div class="btn btn-hollow btn-xs"><i class="fa fa-exclamation-triangle"></i> hollow</div> 
<div class="btn btn-concrete btn-xs"><i class="fa fa-exclamation-triangle"></i> concrete</div>
<h4>Disabled Class Buttons</h4>
<div class="btn btn-default disabled"><i class="fa fa-exclamation-triangle"></i> default</div> 
<div class="btn btn-light disabled"><i class="fa fa-exclamation-triangle"></i> light</div> 
<div class="btn btn-lighter disabled"><i class="fa fa-exclamation-triangle"></i> lighter</div> 
<div class="btn btn-dark disabled"><i class="fa fa-exclamation-triangle"></i> dark</div> 
<div class="btn btn-darker disabled"><i class="fa fa-exclamation-triangle"></i> darker</div>
<div class="btn btn-info disabled"><i class="fa fa-exclamation-triangle"></i> info</div> 
<div class="btn btn-success disabled"><i class="fa fa-exclamation-triangle"></i> success</div> 
<div class="btn btn-warning disabled"><i class="fa fa-exclamation-triangle"></i> warning</div> 
<div class="btn btn-danger disabled"><i class="fa fa-exclamation-triangle"></i> danger</div> 
<div class="btn btn-neutral disabled"><i class="fa fa-exclamation-triangle"></i> neutral</div> 
<div class="btn btn-neutral-light disabled"><i class="fa fa-exclamation-triangle"></i> neutral-light</div> 
<div class="btn btn-primary disabled"><i class="fa fa-exclamation-triangle"></i> primary</div> 
<div class="btn btn-cyanide disabled"><i class="fa fa-exclamation-triangle"></i> cyanide</div> 
<div class="btn btn-meadow disabled"><i class="fa fa-exclamation-triangle"></i> meadow</div> 
<div class="btn btn-cocktail disabled"><i class="fa fa-exclamation-triangle"></i> cocktail</div> 
<div class="btn btn-mango disabled"><i class="fa fa-exclamation-triangle"></i> mango</div> 
<div class="btn btn-berry disabled"><i class="fa fa-exclamation-triangle"></i> berry</div> 
<div class="btn btn-hearts disabled"><i class="fa fa-exclamation-triangle"></i> hearts</div> 
<div class="btn btn-party disabled"><i class="fa fa-exclamation-triangle"></i> party</div> 
<div class="btn btn-midnight disabled"><i class="fa fa-exclamation-triangle"></i> midnight</div> 
<div class="btn btn-cello disabled"><i class="fa fa-exclamation-triangle"></i> cello</div> 
<div class="btn btn-hollow disabled"><i class="fa fa-exclamation-triangle"></i> hollow</div>