Latest web development tutorials
 

jQuery Mobile Buttons


Mobile applications are built upon the simplicity of tapping things you'd want displayed.




Creating a Button in jQuery Mobile

A button in jQuery Mobile can be created in three ways:

  • Using the <input> element
  • Using the <button> element with class="ui-btn"
  • Using the <a> element with class="ui-btn"

<input>

<input type="button" value="Button">
Try it Yourself »

<button>

<button class="ui-btn">Button</button>
Try it Yourself »

<a>

<a href="#anylink" class="ui-btn">Button</a>
Try it Yourself »

Buttons in jQuery Mobile are automatically styled, making them attractive and useable on both mobile devices and desktop computers. We recommend that you use the <a> element with class="ui-btn" to link between pages, and <input> or <button> elements for form submission.

Note:
Before version 1.4, we used the data-role="button" attribute to create a button in jQuery Mobile. As of 1.4, the framework use CSS classes to style buttons (except for <input> buttons).


Navigation Buttons

To link between pages by buttons, use the <a> element with class="ui-btn":

Example

<a href="#pagetwo" class="ui-btn">Go to Page Two</a>
Try it Yourself »

Grouped Buttons

jQuery Mobile provides an easy way for grouping buttons together.

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

Example

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" class="ui-btn">Button 1</a>
  <a href="#" class="ui-btn">Button 2</a>
  <a href="#" class="ui-btn">Button 3</a>
</div>
Try it Yourself »

By default, grouped buttons are grouped vertically with no margins and space between them. And only the first and the last button has rounded corners, which creates a nice look when grouped together.


Back Buttons

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

Example

<a href="#" class="ui-btn" data-rel="back">Go Back</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 two or more buttons to appear side by side, add the "ui-btn-inline" class:

Example

<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>
Try it Yourself »

More CSS Classes For Link Buttons

Class Description Example
ui-btn-b Changes the color of the button to a black background with white text (default is gray background with black text). Try it
ui-corner-all Adds rounded corners to the button Try it
ui-mini Makes the button smaller Try it
ui-shadow Adds shadows to the button Try it

If you want to use more than one class, separate each class with a space, like: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

By default, <input> buttons have shadow and rounded corners. The <a> and <button> element does not.

For a complete reference of CSS classes for common styles, visit our jQuery Mobile CSS Classes Reference.

The next chapter demonstrates how to attach icons to your buttons.