HTML5 Image Toggle Button

 

The Image Toggle Button is a simple UI item that remains active after it is pressed until it is pressed again. It has four states: enabled, pressed, active, and disabled. An active Image Toggle Button looks like this:

 

Big Toggle Button

 

 

Small Toggle Button

 

 

Configuration

 

Big Toggle Button

 

<a href="#"
data-role="button"
data-icon="play"
data-icon-alt="pause"
class="ui-btn-toggle">Play/Pause
</a>

 

Small Toggle Button

 

 <a href="#"
data-role="button"
data-icon="play"
data-icon-alt="pause"
data-iconpos="notext"
class="ui-btn-toggle">Play/Pause
</a>
<a href="#"
data-role="button"
data-icon="radio-off"
data-icon-alt="radio-on"
data-iconpos="notext"
class="ui-btn-toggle">Checked/Not Checked
</a>