Design Buttons in Jquery Mobile

We can create a button by using three tags in Jquery mobile which are INPUT, A, and BUTTON.

List of classes for button designing

ui-btn
ui-btn-inline
ui-corner-all
ui-mini
ui-btn-a, ui-btn-b
ui-shadow
ui-icon-home
ui-btn-icon-left, ui-btn-icon-right, ui-btn-icon-top, ui-btn-icon-bottom, and ui-btn-icon-notext
ui-shadow-icon
ui-state-disabled

Create a button by INPUT tag

It has some border-radius, outline by default. Jquery mobile will design input button even if you don't use class="ui-btn".

Jquery Mobile's Input Button Example

Code:-

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed"><h1>Home</h1></div>
    <div data-role="main" class="ui-content">
      <p>Button in Jquery mobile</p>
      <input type="button" value="Click me !!!" class="ui-btn">
    </div>
    <div data-role="footer" data-position="fixed"><h2>Home footer</h2></div>
</div>

Create button using A (anchor) tag

Jquery Mobile's Anchor Button Example

A Button

Code~

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed"><h1>Home</h1></div>
    <div data-role="main" class="ui-content">
      <p>Button in Jquery mobile</p>
      <a href="#" class="ui-btn">A Button</a>
    </div>
    <div data-role="footer" data-position="fixed"><h2>Home footer</h2></div>
</div>

Create a button using BUTTON tag

It also designed by Jquery mobile even you don't use class="ui-btn".

Jquery Mobile's Button Example

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed"><h1>Home</h1></div>
    <div data-role="main" class="ui-content">
      <p>Button in Jquery mobile</p>
      <button class="ui-btn">Button</button>
    </div>
    <div data-role="footer" data-position="fixed"><h2>Home footer</h2></div>
</div>

Examples of classes for button

Insert icon in button

Use class="ui-icon-name". Here, replace the name with an icon name. But it won't display by doing so. You need to set its position (top, left, right, bottom) in the button. To do this, use class="ui-btn-icon-iconpositon". Replace iconposition with top, left, bottom, right, and notext. When you give notext then the text inside button will be hidden, the only icon will be displayed.

Ex-

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed"><h1>Jaischool</h1></div>
    <div data-role="main" class="ui-content">
      <p>Insert icon in button in Jquery mobile</p>
      <button class="ui-btn ui-icon-home ui-btn-icon-top">Home</button>
    </div>
    <div data-role="footer" data-position="fixed"><h2>Home footer</h2></div>
</div>

Round corners of button

When you create a button using an anchor or button tag. They do not have any border-radius by default. Using a class="ui-corner-all" you can give this design.

Ex~

<button class="ui-btn ui-icon-home ui-btn-icon-right ui-corner-all">Home</button>

Give shadow in the inserted icon

The class="ui-shadow-icon" will add some shadow in the inserted icon.

Ex~

<button class="ui-btn ui-icon-home ui-btn-icon-notext ui-shadow-icon">Home</button>

Show the button disabled

Ex~

<button class="ui-btn ui-icon-home ui-btn-icon-top ui-state-disabled">Home</button>

Class="mini"

Removes some padding or margin to short the button.

Ex~

<button class="ui-btn ui-icon-home ui-btn-icon-left ui-mini">Home</button>

Classic and reverse theme for button

Use class="ui-btn-a" for classic theme and class="ui-btn-b" for inverse theme.

Classic theme (default) example:-

Ex-

<button class="ui-btn ui-btn-a">Home</button>

Inverse theme example:-

Ex-

<button class="ui-btn ui-btn-b">Home</button>

Display two button in a row

Use class="ui-btn-inline". Buttons will have width according to text in it.

Ex-

<button class="ui-btn ui-btn-inline">Home</button>
<button class="ui-btn ui-btn-inline">About us</button>

Note- These visual button example may look not interesting if you see them from a desktop.