BUTTONS

*Default Button

Button

HTML Code:

<div data-role="button">Button</div>

*Inline Button, Inline Button With Icon

DataInline True

Icon Text

HTML Code:

<div data-role="button" data-inline="true">DataInline True</div>
<div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
<div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
<div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
<div data-role="button" data-inline="true" data-icon="rename" data-style="circle"></div>

*Default Button (A tag) A Tag Button HTML Code:

<a href="#buttonTest" data-role="button">A Tag Button</a>

*Button Icon Position top, bottom (with inline)

PositionTop

PositionBottom

PositionTop

PositionBottom

HTML Code:

<div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div>
<div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div>
<div data-role="button" data-icon="call" data-iconpos="top" data-inline="true">PositionTop</div>
<div data-role="button" data-icon="call" data-iconpos="bottom" data-inline="true">PositionBottom</div>

*Custom Button:

HTML Code:

<div data-role="button" data-inline="true" data-icon="call">0</div>
<div data-role="button" data-inline="true" data-icon="call" data-iconpos="top">1</div>
<div data-role="button" data-inline="true" data-icon="call" data-iconpos="bottom">2</div>
<div data-role="button" data-inline="true" data-icon="call" style="width:150px;height:150px">3</div>

CSS Code:

.ui-icon-test{
        background-size: 100% 100%;
        background-image: url(00_button_call);
}

.ui-icon-test2{
        background-position:0% 0%;
        background-size:50% 50%;
        background-image: url(00_button_call);
}

*Input Type = "Button" HTML Code:

<input type="button" value="test button"/>

Button No text