Easy Tutorial
Jquerymobile Pages Event Pageload Jquerymobile Grids Jquerymobile List Views Jquerymobile Events Page Jquerymobile Popups Event Pagebeforeshow Event Pagebeforehide Jquerymobile Events Scroll Jquerymobile Tutorial Jquerymobile List Content Jquerymobile Tables Jquerymobile Install Jquerymobile Themes Jquerymobile Collapsibles Jquerymobile Navbars Event Pageinit Event Pagebeforecreate Event Pagecreate Jquerymobile Ref Data Jquerymobile Ref Css Event Scrollstop Jquerymobile Panels Event Pagecontainerload Event Pagecontainerloadfailed Jquerymobile Form Basic Jquerymobile Transitions Event Swipeleft Jquerymobile Ref Icons Jquerymobile Events Event Pagebeforeload Jquerymobile Form Select Jquerymobile Icons Event Pageshow Jquerymobile Form Sliders Event Swiperight Event Pagehide Jquerymobile Events Touch Jquerymobile Toolbars Jquerymobile Events Orientation Event Swipe Jquerymobile Intro Jquerymobile Buttons Event Taphold Event Tap Jquerymobile Ref Events Event Scrollstart Jquerymobile Form Inputs Event Pageloadfailed Event Pagecontainerbeforeload Jquerymobile Examples Jquerymobile Filters Event Orientationchange
❮ Jquerymobile Intro Event Taphold ❯

jQuery Mobile Button

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

Creating Buttons in jQuery Mobile

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

<button>

<input>

<a data-role="button">Button</a>

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

Navigation Buttons

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

Example <a href="#pagetwo" data-role="button">Visit Second Page</a>

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 data-inline="true">Visit Second Page</a>

Grouped Buttons

jQuery Mobile provides a simple way to group buttons together.

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

Example <div data-role="controlgroup" data-type="horizontal">

| | By default, grouped buttons are vertically grouped with no margins or spaces between them. Only the first and last buttons have rounded corners to create a neat appearance when grouped together. | | --- | --- |

Back Buttons

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

Example <a data-rel="back">Back</a>

More Button Link Examples

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

| | If you need to use more styles, separate each style class with a space, such as: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" <br> <br> By default, <input> buttons have rounded corners and shadows. <a> and <button> elements do not. | | --- | --- |

For a more complete list of CSS classes, please refer to our jQuery Mobile CSS Class Reference.

The next chapter demonstrates how to add icons to buttons.

❮ Jquerymobile Intro Event Taphold ❯