in jQuery Mobile, buttons that are used for navigation are coded as links and those that submit forms are coded as button elements.
In the main content block of a page (data-role="content"), any link that you want to look like a button needs the data-role="button" added to the link to tell the framework to style the link as a button.
<a href="index.html" data-role="button">Link button</a>
Creates this button:
Link buttonA 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. We found it was impossible to consistently style link and native form buttons consistently across platforms so 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 the link button, it triggers a click on the original form button.
<button>Button submit</button>
Creates this button:
Icons can be added to buttons by adding a data-icon attribute on the anchor to specify the icon to display. There a core set of standard icons included in the framework. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.
<a href="index.html" data-role="button" data-icon="arrow-r">Link button</a>
Creates this button:
Link buttonBy default, icons in buttons are added to the left of the text, but the data-iconpos attribute specifies the icon position: left or right of the text. To create an icon-only button, set the data-iconpos to notext and the button plugin will hide the text and add it as a title attribute on the link to provide context for screen readers and devices that support tooltips. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our data- attributes on the link.
<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Link button</a>
Creates this button:
Link buttonTo use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.
If you have multiple buttons that should sit side-by-side on the same line instead of stacked like the default buttons, wrap the buttons in a container that has a data-inline="true" attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
It's possible to group a set of buttons together to form a single block of buttons that look contained like a navigation component. To get this effect, wrap a set of buttons in a container with the data-role="controlgroup" attribute and the framework will create a vertical button group. This removes all margins and drop shadows between the buttons and only rounds the top and bottom buttons to get the effect that they are group together.
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
Creates this button group:
By default, grouped buttons are presented as a vertical list. By adding the data-type="horizontal" attribute
When buttons are placed inside header or footer bars, they are styled a bit differently than in the body. To save space, buttons in bars are styled with a smaller text size, less padding and only enough width to fit the text and icons inside. The toolbar documentation has full details on the styling options of button in bars.