jQuery Mobile Buttons
reading "Teach Yourself jQuery Mobile In 24 Hours"
these are some buttons you can use
<!DOCTYPE html>
<html>
<head>
<title>Buttons jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style type="text/css">
.ui-icon-custom-sams {
background-image:url("custom-icon-sams.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-custom-sams {
background-image: url("custom-icon-sams-hd.png");
background-size: 18px 18px;
}
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Buttons</h1></div>
<div data-role="content">
<p>Link-based button</p>
<a href="#" data-role="button">Link-based</a>
<p><button> Element</p>
<button type="button">Button</button>
<p><input type="submit"></p>
<input type="submit" value="Submit" />
<p><input type="button"></p>
<input type="button" value="Button"/>
<p><input type="reset"></p>
<input type="reset" value="Reset" />
<p><input type="image"></p>
<input type="image" value="Image" />
<a href="#" data-role="button" data-corners="false">Squared</a>
<a href="#" data-role="button">Rounded</a>
<a href="#" data-role="button" data-corners="false">Squared</a>
<a href="#" data-role="button" data-shadow="false">No Shadow</a>
<a href="#" data-role="button" data-corners="false" data-shadow="false">Squared no Shadow</a>
<a href="#" data-role="button">Full Width Button</a>
<a href="#" data-role="button" data-inline="true">Inline Button</a>
<a href="#" data-role="button" data-inline="true">Also an Inline Button</a>
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" data-role="button">Left</a></div>
<div class="ui-block-b"><a href="#" data-role="button">Right</a></div>
</div>
<a href="#" data-role="button" data-icon="arrow-l">Click left</a>
<a href="#" data-role="button" data-icon="arrow-r">Click right</a>
<a href="#" data-role="button" data-icon="arrow-u">Click Up</a>
<a href="#" data-role="button" data-icon="arrow-d">Click Down</a>
<a href="#" data-role="button" data-icon="delete">Delete</a>
<a href="#" data-role="button" data-icon="plus">Plus</a>
<a href="#" data-role="button" data-icon="minus">Minus</a>
<a href="#" data-role="button" data-icon="check">Check</a>
<a href="#" data-role="button" data-icon="gear">Gear</a>
<a href="#" data-role="button" data-icon="refresh">Refresh</a>
<a href="#" data-role="button" data-icon="forward">Forward</a>
<a href="#" data-role="button" data-icon="back">Back</a>
<a href="#" data-role="button" data-icon="star">Star</a>
<!-- With icon position -->
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext">Alert</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="top">Info</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="right">Home</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="bottom">Search</a>
<!-- Custom icon -->
<a href="#" data-role="button" data-icon="custom-sams">Custom icon</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>footer section</h4>
</div>
</div>
</body>
</html>