# BUTTONS

*Default Button
Button
HTML Code: <div data-role="button">Button</div>
*Inline Button, Inline Button With Icon
DataInline True
Icon Text
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:
0
1
2
3
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