HTML5 Image Button

The image button UI Element is a customizable button UI Element which includes images for each state. The following image shows some examples:

Creation

You need to add the following code to create the buttons. There are different types of buttons:

Buttons with an image on the left

<a href="#" data-role="button" data-icon="check">Check</a>
<a href="#" data-role="button" data-icon="delete" data-theme="e">Delete</a>
<a href="#" data-role="button" data-icon="play">Play/Pause</a>

The data-icon attribute defines which icon is showed inside the button. The options are 'check', 'delete', and 'play'.

Full Image Buttons

You can create full image buttons with no text adding this code

<a href="#"
data-role="button"
data-icon="close"
data-iconpos="notext"
data-theme="d"
class="ui-btn-icon-custom ui-btn-icon-square ui-btn-icon-large ui-btn-icon-noborder">Close
</a>
<a href="#"
data-role="button"
data-icon="levelup"
data-iconpos="notext"
data-theme="d"
class="ui-btn-icon-custom ui-btn-icon-square ui-btn-icon-large ui-btn-icon-noborder">Level Up
</a>
<a href="#"
data-role="button"
data-icon="list"
data-iconpos="notext"
data-theme="f"
class="ui-btn-icon-custom ui-btn-icon-square ui-btn-icon-xxlarge ui-btn-icon-noborder">List
</a>
<a href="#"
data-role="button"
data-icon="remove"
data-iconpos="notext"
data-theme="d"
class="ui-btn-icon-custom ui-btn-icon-small ui-btn-icon-noborder">Remove
</a>
<a href="#"
data-role="button"
data-icon="play-alt"
data-iconpos="notext"
data-theme="f"
class="ui-btn-icon-custom ui-btn-icon-medium ui-btn-icon-noborder">Play
</a>
<a href="#"
data-role="button"
data-icon="pause-alt"
data-iconpos="notext"
data-theme="f"
class="ui-btn-icon-custom ui-btn-icon-medium ui-btn-icon-noborder">Pause
</a>
<a href="#"
data-role="button"
data-icon="secondary"
data-iconpos="notext"
data-theme="f"
class="ui-btn-icon-custom ui-btn-icon-square ui-btn-icon-xlarge ui-btn-icon-noborder">Secondary
</a>

The predefined buttons are: