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.
Heads Up!
We have deliberately not styled elements with [role="alert"] to match their native counterparts.
This is for accessibility reasons as we believe that is will promote misuse to do so.
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.
Input : Reset
Standard input[type="reset"] element.
Heads Up!
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.
Input : Reset
Standard input[type="reset"] element.
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.
Input : Reset
Standard input[type="reset"] element.
Grouped Buttons
Wrap the buttons in a div with class .btn-group
Button
Standard button element.
Input : Button
Standard input[type="button"] element.
Input : Submit
Standard input[type="submit"] element.
Input : Reset
Standard input[type="reset"] element.