Basic Button

This is the basic syntax for a <button> element with the base button class btn.

The code for including a basic button:

<button class="btn">Continue</button>

Accessible Buttons

In order to keep the accessibility you should use these primary button versions (secondary are on white/gray background and are accessible already):



Square Button .buttonSquare:

Primary buttons in 7 accessible colors, support hover and focus (try it!). use .buttonSquare + .blue / .purple / .brown / ...



Square Button Shapes:



Round GlyphIcons / Font Awesome Buttons .buttonRound:

Note: These buttons carry markup for assistive technologies, for people who can't see the icon and understand the context from it. Don't remove it.



Round GlyphIcons / Font Awesome Buttons Border-Only Style .buttonRound + .border-only:




Metro Style Buttons:

Flat buttons with both font icon and text.

group of people Icon
Groups
cogs Icon
Settings
heart Icon
Love
car Icon
Car
group of people Icon
Groups
cogs Icon
Settings
code Icon
Code
car Icon
Car


These are the same color classes on Bootstrap's default .btn-primary:

To create these buttons add the class .blue‚ .purple or .brown.


The 'default' Bootstrap primary button is not accessible. This template changed the blue color used so it is now accessible:


The 'default' Bootstrap Danger button is accessible and was not changed:


The 'default' Bootstrap Warning button is accessible and was not changed:

The 'default' Bootstrap button-link is accessible and was not changed:


Problematic Buttons

Some of the default Bootstrap classes are not accessible by WCGA 2.0 AA level:

.btn-success‚ .btn-info‚ .btn-primary.

in order to use them their colors have been changed to make them more contrasting:

Original:  

Accessible:

Badges

Badges have the same problems and thus the same colors will be applied there as well:

Default Primary Success Info Warning Danger

to use a badge use this code:

<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>


Button Sizes:


Usage:

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Inactive Buttons

Display a disabled button.

Source code for disabled primary buttons

<button class="btn disabled" disabled="disabled" aria-disabled="true">CONTINUE</button>

Note: The aria-disabled="true" attribute is added for accessibility to alert the screen reader that the element is disabled. Do not rely solely on styling for disabled buttons: explicitly provide the disabled="disabled" attribute.

Inputs as Buttons

Display an <input> as a button.

This button is for styling purposes only and does not navigate to another location.

Source code for inputs styled as buttons 

<input type="button" class="btn btn-primary" value="SUBMIT">

Links As Buttons

Links used as buttons require the role=“button” to present the link as a button to assistive technologies.

Edit This button is for styling purposes only and does not navigate to another location.

Source code for links styled as buttons 

<a class="edit" title="Edit" href="javascript:void(0);" role="button">Edit</a>

Checkboxes

Which movie genres do you like?

Radio Buttons

Is Twilight the greatest movie of all time?