Skip to content
jQuery Mobile

Buttons

Themed, iconified, and grouped buttons from links and inputs.

#button#ui#controls

Code

jquery-mobile
<!-- 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>