Examples
Boring Default Buttons
Here we have the boring default buttons. Nothing exciting but they look better than the browser defaults.
Anchor Button<a href="#" class="btn">Anchor Button</a> <button class="btn">Button Element</button> <input type="submit" class="btn" value="Submit Input">
Context Buttons
Here you can add a splash of colour to your life by adding some context to your buttons.
<button class="btn btn-primary">btn-primary</button> <button class="btn btn-secondary">btn-secondary</button> <button class="btn btn-success">btn-success</button> <button class="btn btn-danger">btn-danger</button> <button class="btn btn-warning">btn-warning</button> <button class="btn btn-info">btn-info</button>
Levitating Buttons
Here we have some magical levitating buttons. Designed to lift you when your feeling down.
<button class="btn btn-levitate btn-primary">btn-levitate btn-primary</button> <button class="btn btn-levitate btn-secondary">btn-levitate btn-secondary</button> <button class="btn btn-levitate btn-success">btn-levitate btn-success</button> <button class="btn btn-levitate btn-danger">btn-levitate btn-danger</button> <button class="btn btn-levitate btn-warning">btn-levitate btn-warning</button> <button class="btn btn-levitate btn-info">btn-levitate btn-info</button>
Cool Expanding Buttons
There is nothing more to say than "wow these are cool"! Well actually there is one minor caveat.... The expand/retract effect doesn't work on input elements. Inputs can't use ::before and ::after pseudo classes apparently which is a shame.
<button class="btn btn-expand btn-primary">btn-expand btn-primary</button> <button class="btn btn-expand btn-secondary">btn-expand btn-secondary</button> <button class="btn btn-expand btn-success">btn-expand btn-success</button> <button class="btn btn-expand btn-danger">btn-expand btn-danger</button> <button class="btn btn-expand btn-warning">btn-expand btn-warning</button> <button class="btn btn-expand btn-info">btn-expand btn-info</button>
Outline Buttons
Here we peer into the soul of your buttons and just see their outline. However if you hover over them then that brings some colour back into their cheeks.
<button class="btn btn-outline">btn-outline</button> <button class="btn btn-outline-primary">btn-outline-primary</button> <button class="btn btn-outline-secondary">btn-outline-secondary</button> <button class="btn btn-outline-success">btn-outline-success</button> <button class="btn btn-outline-danger">btn-outline-danger</button> <button class="btn btn-outline-warning">btn-outline-warning</button> <button class="btn btn-outline-info">btn-outline-info</button>
Pulsing Buttons
Here we have the life and soul of the button world with pulsing buttons dancing away to the latest songs in the button world... or something like that anway.
<button class="btn btn-pulse">btn-pulse</button> <button class="btn btn-primary btn-pulse">btn-primary btn-pulse</button> <button class="btn btn-secondary btn-pulse">btn-secondary btn-pulse</button> <button class="btn btn-success btn-pulse">btn-success btn-pulse</button> <button class="btn btn-danger btn-pulse">btn-danger btn-pulse</button> <button class="btn btn-warning btn-pulse">btn-warning btn-pulse</button> <button class="btn btn-info btn-pulse">btn-info btn-pulse</button>
Large Buttons
Use these large buttons when you want to make a BIG impression!
<button class="btn btn-large btn-primary">btn-large</button> <button class="btn btn-large btn-secondary">btn-large</button> <button class="btn btn-large btn-success">btn-large</button> <button class="btn btn-large btn-danger">btn-large</button> <button class="btn btn-large btn-warning">btn-large</button> <button class="btn btn-large btn-info">btn-large</button>
Small Buttons
When your looking for buttons on the smaller side check these wee fella's out.
<button class="btn btn-small btn-primary">btn-small</button> <button class="btn btn-small btn-secondary">btn-small</button> <button class="btn btn-small btn-success">btn-small</button> <button class="btn btn-small btn-danger">btn-small</button> <button class="btn btn-small btn-warning">btn-small</button> <button class="btn btn-small btn-info">btn-small</button>
Buttons With Icons
Here you can have buttons with icons alongside your text. Pretty cool indeed!
<button class="btn btn-primary">Submit <i class="material-icons">send</i></button> <button class="btn btn-secondary">Undo <i class="material-icons">undo</i></button> <button class="btn btn-success">Redo <i class="material-icons">redo</i></button> <button class="btn btn-danger">Delete <i class="material-icons">delete</i></button> <button class="btn btn-warning">Add <i class="material-icons">add</i></button> <button class="btn btn-info">Create <i class="material-icons">create</i></button>