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:

data-icon	Description
close	Close Button
levelup	Level Up Button
list	List Button
remove	Remove Button
play-alt	Play Button (small)
pause-alt	Pause Button (small)
secondary	Plus Button