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 type="button" value="Button">


<button class="ui-btn">Button</button>


<a href="#anylink" class="ui-btn">Button</a>

Navigation Buttons

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


<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:


<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>

Back Buttons

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


<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:


<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

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.

Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.