jquery mobile css changes
HTML
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>Page1</h1>
</div>
<div data-role="content">
Background Gradient (original)
<a href="#page2" class="ui-btn-up-r" data-role="button" data-corners="true" data-icon="check" >Page 2</a>
Background image stretched and shrinked to fit (no border)
<a href="#page2" style="" class="ui-btn-up-r" data-role="button" data-corners="true" data-icon="check" data-theme="a" >Page 3</a>
Background image stretched and shrinked to fit
<a href="#page2" style="background-size: 100%;background-image:url('http://opengameart.org/sites/default/files/golden-border.png')" class="ui-btn-up-s" data-role="button" data-corners="false" data-icon="check" data-theme="b">Page 23</a>
border only
<a href="#page2" class="aDeleteBtn" data-role="button" data-corners="false" data-icon="check" data-theme="b">Page 23</a>
<img src="http://opengameart.org/sites/default/files/golden-border.png" />
Glow
<a href="#" class="glowBorder" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
<a href="#" data-role="button" class="transparentButton glowBorder" style="text-decoration:none;width:18px;height:18px;" data-inline="true">B</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
...
SCSS
.aDeleteBtn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: right;
height: 15px;
line-height: 15px;
margin: 3px 10px 0 0;
padding: 0.6em;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
/* red color buttons */
.ui-btn-up-r { border: 1px solid #953403; background: #2567ab; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #953403; text-decoration: none; background-image: -moz-linear-gradient(top, #ec4a0b, #ad390c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ec4a0b),color-stop(1, #ad390c)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ec4a0b', EndColorStr='#ad390c')"; }
.ui-btn-up-r a.ui-link-inherit { color: #fff; }
.ui-btn-hover-r { border: 1px solid #953403; background: #f15c22; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #f15c22, #f15c22); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f15c22),color-stop(1, #f15c22)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f15c22', EndColorStr='#f15c22')"; }
.ui-btn-hover-r a.ui-link-inherit { color: #fff; }
.ui-btn-down-r { border: 1px solid #225377; background: #79ae21; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #bc770f, #e6590c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bc770f),color-stop(1, #e6590c)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#bc770f', EndColorStr='#e6590c')"; }
.ui-btn-down-r a.ui-link-inherit { color: #fff; }
.ui-btn-up-r, .ui-btn-hover-r, .ui-btn-down-r { font-family: Helvetica, Arial, sans-serif; }