Buttons
Hubble comes with a huge amount of button options and styles, doing the hard work for you when it comes to fancy buttons.
- Basic buttons
- Contextual buttons
- Outline buttons
- Circle buttons
- Raised buttons
- Pure buttons
- Icon buttons
- Button sizes
- Click effect
- Spinners
- Button groups
Basic buttons
Buttons can be created by simply adding the .btn class to a <a> or <button> element.
Contextual buttons
Add the contextual classes .btn-primary, .btn-info, .btn-success, .btn-warning and .btn-danger
to contextualise button styling.
Outline buttons
Add the .btn-outline to any button to change the style to an outlined type.
Circle buttons
Add the .btn-circle class to any button to change the style to a circled type.
Raised buttons
Add the .raised class to any button to create a subtle drop shadow effect.
Pure buttons
Add the .pure class to any button to remove all borders and drop shadows.
Icon buttons
You can add icons to buttons using the font awesome icon library.
Button sizes
Buttons can be sized using 4 different sizing classes .btn-xs, .btn-sm, .btn-lg & .btn-xl.
Note that the font-sizes stay the same throughout with only the padding changing.
Click effect
Add the .js-ripple class to any button to make a ripple effect when the button is clicked.
Spinners
Add the svg spinner code below inside any button and give the button a .with-spinner class. When the button
has the .active class the spinner will show
Button groups
Create groups by wrapping a set of buttons in a .btn-group classed element.