Buttons

Code

<!-- Basic buttons -->
<a href="#" class="ui-btn">Link Button</a>
<button class="ui-btn">Button Element</button>
<input type="button" value="Input Button" class="ui-btn">

<!-- Inline + themed buttons (a=light, b=dark) -->
<a href="#" class="ui-btn ui-btn-inline">Inline</a>
<a href="#" class="ui-btn ui-btn-inline ui-btn-b">Inline B</a>

<!-- Icon buttons: 50+ built-in icons -->
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>
<a href="#" class="ui-btn ui-icon-gear ui-btn-icon-right">Settings</a>
<a href="#" class="ui-btn ui-icon-star ui-btn-icon-top">Favorite</a>

<!-- Horizontal button group -->
<div data-role="controlgroup" data-type="horizontal">
  <a href="#" class="ui-btn">Yes</a>
  <a href="#" class="ui-btn">No</a>
  <a href="#" class="ui-btn">Maybe</a>
</div>

<!-- Custom icon -->
<a href="#" class="ui-btn ui-btn-icon-left"
   data-icon="custom" data-iconpos="left">Custom</a>

Explanation

Any link, button, or input can become a mobile button by adding class ui-btn; ui-btn-inline keeps buttons on one line and ui-btn-b switches the theme swatch. The 50+ built-in icons are applied with ui-icon-* classes combined with ui-btn-icon-{pos} to control placement. controlgroup arranges buttons into a connected bar.

More jQuery Mobile Snippets