jQuery Mobile Button

Mobile applications are built on simple clickable things that you want to display.



Creating Buttons in jQuery Mobile

In jQuery Mobile, buttons can be created in three ways:

  • Using the <button> element
  • Using the <input> element
  • Using the <a> element with data-role="button"

<button>

<button>Button</button>

Try it Yourself »

<input>

<input type="button" value="Button">

Try it Yourself »

<a>

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

Try it Yourself »

lamp In jQuery Mobile, buttons are automatically styled to make them more attractive and usable on mobile devices.We recommend using an <a> element with data-role="button" to link between pages, and using <input> or <button> elements for form submission.

Navigation Buttons

To link between pages with buttons, use an <a> element with the data-role="button" attribute:

Example

<a href="../index.html" data-role="button">Visit the second page</a>

Try it Yourself »

Inline Buttons

By default, buttons take up the full width of the screen. If you want a button that is only as wide as its content, or if you want to display two or more buttons side by side, add data-inline="true":

Example

<a href="../index.html" data-role="button" data-inline="true">Visit the second page</a>

Try it Yourself »

Grouped Buttons

jQuery Mobile provides a simple way to group buttons together.

Use the data-role="controlgroup" attribute together with data-type="horizontal|vertical" to specify whether to group buttons horizontally or vertically:

Example

<div data-role="controlgroup" data-type="horizontal">
<a href="../index.html" data-role="button">Button 1</a>
<a href="../index.html" data-role="button">Button 2</a>
<a href="../index.html" data-role="button">Button 3</a>
</div>

Try it Yourself »

lamp By default, grouped buttons are arranged vertically, with no margins or spaces between them. Also, only the first and last buttons are rounded, so that they create a nice appearance when grouped together.

Back Button

To create a back button, use the data-rel="back" attribute (this ignores the anchor's href value):

Example

<a href="../index.html" data-role="button" data-rel="back">Back</a>

Try it Yourself »

More Link Button Examples

Class Description Example
ui-btn-b Change button color to black and font to white (default is gray background, black font). Try it Yourself
ui-corner-all Add rounded corners to buttons Try it Yourself
ui-mini Make small buttons Try it Yourself
ui-shadow Add shadow to buttons Try it Yourself

Note If you need to use more styles, separate each style class with a space, e.g.: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

By default, <input> buttons have rounded corners and shadow effects. <a> and <button> elements do not.

For a more complete set of CSS classes, please see ourjQuery Mobile CSS Classes Reference。

The next chapter demonstrates how to add icons to buttons.

Other Extensions