Button markup options

Styling links as buttons

In the main content block of a page, you can style any link as a button by adding the data-role="button" to the link. The framework will add the necessary classes to style the link as a button.

<a href="index.html" data-role="button">Link button</a>

Link based button example:

Link button

Form buttons

A button element or an input with a type of submit, reset, button, or image will all be automatically transformed into a custom styled button, no need to add the data-role="button" attribute.

Because it's not possible to consistently form buttons consistently across platforms, the framework actually generates a new link-based button for each form button button and hides the original. When a click event fires on a link button, it triggers a click on the original form button.

Button based button

Input type="button" based button

Input type="submit" based button

Input type="reset" based button

Input type="image" based button