Button basics


Button basics

Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (a elements) to mark up navigation buttons, and input or button elements for form submission.

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" attribute. The framework will enhance the link with markup and 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 or input element 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.

To preserve events bound to the original button or input, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the the custom-styled button, they're actually clicking on the original element.

Button based button:

Input type="button" based button:

Input type="submit" based button:

Input type="reset" based button:

Input type="image" based button: