Use the button classes on an
<a>
,
<button>
, or
<input>
element.
Outlined Buttons
Use the
.btn-o
class for outlined buttons.
Colorful Buttons
Use any of the available button classes to quickly create a styled button.
Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the
.sr-only
class.
Azure Button
Add class
.btn-azure
,
.btn-light-azure
or
.btn-dark-azure
to your button.
Blue Button
Add class
.btn-blue
,
.btn-light-blue
or
.btn-dark-blue
to your button.
Purple Button
Add class
.btn-purple
,
.btn-light-purple
or
.btn-dark-purple
to your button.
Red Button
Add class
.btn-red
,
.btn-light-red
or
.btn-dark-red
to your button.
Orange Button
Add class
.btn-orange
,
.btn-light-orange
or
.btn-dark-orange
to your button.
Yellow Button
Add class
.btn-yellow
,
.btn-light-yellow
or
.btn-dark-yellow
to your button.
Green Button
Add class
.btn-green
,
.btn-light-green
or
.btn-dark-green
to your button.
Beige Button
Add class
.btn-beige
,
.btn-light-beige
or
.btn-dark-beige
to your button.
Grey Button
Add class
.btn-grey
,
.btn-light-grey
or
.btn-dark-grey
to your button.
Options
You can change the style and the state of the buttons using minimal markup.
Square Buttons
Do you like the square buttons? Add
.btn-squared
to change its shape.
Sizes
Fancy larger or smaller buttons? Add
.btn-lg
,
.btn-sm
, or
.btn-xs
for additional sizes.
Disabled State
Add the
disabled
attribute to
<button>
buttons.
Active State
if you need to force the
:active
appearance, add
.active
.
Block level buttons
Create block level buttons—those that span the full width of a parent— by adding
.btn-block
.
