Button Elements

Button styling in Responsive has, like everything else, been designed with the bare minimum of CSS. Styles have been normalized across all button states with no extra css classes added.

Default Button Styles

All styles are attribute based with all four button states covered:

:hover
:focus
:active
:disabled

Button

Standard button element.

Input : Button

Standard input[type="button"] element.

Input : Submit

Standard input[type="submit"] element.

Link

Standard a[role="button] element.

button

We strongly recommend using the <button></button> element over the <input /> element for all button style markup.

Disabled State

Hyperlink disabled state are styled by adding the class .disabled. The developer would have to additionally use JavaScript to prevent the default behaviour.

Button

Standard button element.

Input : Button

Standard input[type="button"] element.

Input : Submit

Standard input[type="submit"] element.

Link

Standard a[role="button] element.

button

Inline Buttons

Add the class .btn-inline

Button

Standard button element.

Input : Button

Standard input[type="button"] element.

Input : Submit

Standard input[type="submit"] element.

Link

Standard a[role="button] element.

submit

Grouped Buttons

Wrap the buttons in a div with class .btn-group

first second third fourth