FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

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.