Sizes
Buttons can be resized.
<button class="small"> Small </button>
<button> Default </button>
<button class="medium"> Medium </button>
<button class="large"> Large </button>Styles
Change the look of your buttons with ease.
Rounded
Make your buttons pill-shaped using the .rounded class.
<button class="green rounded"> Green </button>Inverted
Use the .inverted class to have the color of your button appear on hover and click.
<button class="green inverted"> Green </button>Outlined
Add the .outlined class to make your buttons simple colored outlines.
<button class="green outlined"> Green </button>Combinations
Use the .rounded class with either the .inverted or .outlined class to create the perfect button.
<button class="red rounded inverted"> Red </button>
<button class="green rounded outlined"> Green </button>States
Buttons can be disabled using the disabled attribute.
<button disabled> Disabled </button>Classes
Links and inputs can be styled to look like buttons by adding the .button class.
<button> Default Button </button>
<a class="button" href="#"> Link Button </a>
<input type="button" value="Input Button">