1. Home
  2. Features - Buttons & Controls

Features - Buttons & Controls

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
music Icon
Music
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 accessible:

To use the 'default' button add the class .bootstrapBlue (using .btn-primary without any of those classes will produce the blue type above).


The 'default' Bootstrap Danger 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-warning.

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

Original:  

Accessible:

In Addition, lables have the same problems and thus the same colors will be applied there as well:

Default Primary Success Info Warning Danger

Button Sizes:

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?

Special Input Fields

Input Fields in Different states

Note: The preceding input examples do not demonstrate the input “masking”‚ they only show the normal state and readonly state of inputs.

Formatted Fields with the Masked Input Plugin

The Jasny Bootstrap Masked Input Plugin allows a user to easily enter fixed width data in a specified format (dates, phone numbers, etc). For more information, you can reference the Jasny Bootstrap Input Mask documentationThis link opens a new window or tab.

Select inside the input field to see the date masking.

Expected format 999-99-999-9999-9

Expected format M M/D D/Y Y Y Y

Code Example

The following code formats the values of Date Of Birth date field using a MM/DD/YYYY format.

Source code for masked input plugin library file and JavaScript for date field formatting using MM/DD/YYYY format

$("#dob").inputmask({mask: "99/99/9999"});