Skip to content Skip to main navigation Report an accessibility issue

Buttons

Documentation

Do
  • Use sparingly. Buttons are great for calls to action. You should rarely need more than one on a page.
  • Keep button labels as short and descriptive as possible.
Don't
  • Be consistent. Don’t use multiple styles.
EXAMPLE

Link

Big Button

Small Button

Code

HTML
<p><a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input" />
<input class="btn btn-default" type="submit" value="Submit" /></p>

<p><a href="#" class="btn btn-default btn-default btn-lg">Big Button</a></p>

<p><a href="#" class="btn btn-default btn-default btn-sm">Small Button</a></p>
Available as a shortcode in the WordPress theme
[button link="#"]Action[/button]
[button size="sm" link="#"]Action[/button]
[button size="lg" link="#"]Action[/button]