[MOBILE] Back button + Icon buttons Footer with SCSS

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

by JuanMa Garrido

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="main">
    <div data-theme="c" data-role="header" data-position="fixed">
        
        <h3>Header</h3>
        <a data-role="button" data-rel="back" data-icon="arrow-l" data-theme="app-ios">Back</a>
        
    </div>
    <div data-role="content">
    
    <!-- start slipsum code ------------------ -->

<h2>Is she dead, yes or no?</h2>
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.  </p>

<h2>Hold on to your butts</h2>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

<h2>No, motherfucker</h2>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

<h2>We happy?</h2>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through...

SCSS

/* button background and borders color */
a[data-theme="app-ios"] { 
    border: none; 
}
a[data-theme="app-ios"] .ui-btn-corner-all { 
    border: 1px solid rgba(0,0,0, 0.4); 
    
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    
    /* background: -webkit-gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa)); */
    background-image: linear-gradient(top, #9FB3CC 6%, #5B80AB 51%);
    background-image: -o-linear-gradient(top, #9FB3CC 6%, #5B80AB 51%);
    background-image: -moz-linear-gradient(top, #9FB3CC 6%, #5B80AB 51%);
    background-image: -webkit-linear-gradient(top, #9FB3CC 6%, #5B80AB 51%);
    background-image: -ms-linear-gradient(top, #9FB3CC 6%, #5B80AB 51%);
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.06, #9FB3CC),
        color-stop(0.51, #5B80AB)
    );
    
    
   /* -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2); */ 
    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0, 0.2);
    box-shadow: inset 0px 1px 1px 0px rgba(0,0,0, 0.2);
    
    overflow: visible; 
    padding-left: 8px !important; 
    padding-right: 8px !important; 
} 

/* shadows and label color */
a[data-theme="app-ios"].ui-shadow, 
a[data-theme="app-ios"] { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background-clip: none; webkit-background-clip: none; moz-background-clip: none; color: white; font-weight: bold; top: 5px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0, 0.4); } 

/* make room for the point */
a[data-theme="app-ios"].ui-btn-left { left: 14px; }
a[data-theme="app-ios"].ui-btn-left .ui-btn-corner-all { padding-left: 5px !important; }

/* position the DIV that contains the point */
a[data-theme="app-ios"] .ios-tip { 
    float: left; 
    left: -9px; 
    top: 5px; 
    position: absolute; 
    
    /* -webkit-transform: scale(.7, 1.0); */
   ...

JavaScript

$(document).ready(function(){
    // make sure we only add the point the back buttons 
    var backButton = $('a[data-theme="app-ios"]').filter('[data-rel="back"]');
    backButton.find('.ui-icon').remove();
    backButton.append('<div class="ios-tip"><span>&nbsp;</span></div>');
});