Jquery Mobile - Buttons

This example demonstartes the different styles that can be applied for a form element button

by Shreerang Patwardhan

HTML

<a href="#" data-role="button">Link button</a>
<form>
    <button>Button</button>
    <input type="button" value="Input button" />
    <input type="submit" value="Submit button" />
    <input type="reset" value="Reset button" />
</form>

<a href="#" data-role="button" data-inline="true">First button</a>
<a href="#" data-role="button" data-inline="true" data-theme="b">Second button</a>
<a href="#" data-role="button" data-inline="true" data-theme="a" data-mini="true">Mini button</a>

<a href="#" data-role="button" data-icon="star" data-theme="b">Icon button</a>
<a href="#" data-role="button" data-icon="star" data-theme="b" data-iconpos="top">Icon button</a>
<a href="#" data-role="button" data-icon="star" data-theme="b" data-iconpos="bottom">Icon button</a>
<a href="#" data-role="button" data-icon="star" data-theme="b" data-iconpos="right">Icon button</a>

<a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b">Icon button</a>

<div data-role="controlgroup">
    <a href="#" data-role="button">First button</a>
    <a href="#" data-role="button">Second button</a>
    <a href="#" data-role="button">Third button</a>
</div>

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button">First button</a>
    <a href="#" data-role="button">Second button</a>
    <a href="#" data-role="button">Third button</a>
</div>

<a href="#" data-role="button" class="ui-disabled" data-theme="a">First button</a>
<input type="button" value="Button" disabled data-theme="a" />