jQuery Mobile Buttons

Mobile applications are based upon the effortlessness of tapping things you'd need displayed.

Creating a Button in jQuery Mobile

A catch in jQuery Mobile can be made in three ways:

  • Using the <input> element
  • Using the <button> component with class="ui-btn"
  • Using the <a> component 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 connect between pages by catches, utilize the <a> component with class="ui-btn":


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

Grouped Buttons

jQuery Mobile gives a simple method to gathering catches together.

Use the information role="controlgroup" quality together with information type="horizontal|vertical" in a holder component, to determine regardless of whether to assemble catches on a level plane or vertically:


<div data-role="controlgroup" information 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 make a Back catch, utilize the information rel="back" quality (Note: this will overlook the stay's href value):


<a href="#" class="ui-btn" data-rel="back">Go Back</a>
Try it yourself »

Inline Buttons

By default, secure take the full width of the screen. On the off chance that you need a catch that is just as wide as its substance, or on the off chance that you need at least two catches to seem one next to the other, include 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 shade of the catch to a dark foundation with white content (default is dim foundation with dark text). Try it
ui-corner-all Adds adjusted corners to the button Try it
ui-mini Makes the catch smaller Try it
ui-shadow Adds shadows to the button Try it

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

The next section exhibits how to join symbols to your buttons.

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