Jquery Mobile Button markup options

Buttons that are used for navigation should be coded as anchor links, and those that submit forms as button elements — each will be styled identically by the framework.

Styling links as buttons

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

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

Produces this link-based button:

Link button

Form buttons

For ease of styling, the framework automatically converts any button element or input with a type of submit, reset, button, or image into a custom styled link-based button — there is no need to add the data-role="button" attribute.

The original form-based button is hidden, but remains in the markup. When a click event fires on a link button, it triggers a click on the original form button.

Button based button:

Button element

Input type="button" based button:

Input type=button

Input type="submit" based button:

Input type=submit

Input type="reset" based button:

Input type=reset

Input type="image" based button:

Input type=image