<button>

Cross-browser button IE8 no border and moving around when clicked

by hkirsman

HTML

<form action="" style="padding: 20px">
    <button class="button01" type="submit"><span><span>Button 1</span></span></button>
    
    <a class="button01" href="#"><span><span>Button 2</span></span></a>
</form>

CSS

/*--- Reset ---*/
button{background:transparent;border:0;width:auto;overflow:visible !important;cursor:pointer;margin:0;padding:0;}
/* Firefox fix */
button::-moz-focus-inner{border:none;padding:0;}
.button:hover{text-decoration:none;}
/* JS check - adds safari class to body if pc and safari */
.safari button > span{margin:-1px -3px 0;position:relative;}
/*
  This removes dashed border around button from IE8
  But for usability, we should add outline
*/
:focus{outline:0}
/* Stops IE8 (and possible IE6 and 7 as well?) from moving button down when clicked */
button span{position:relative}

/*--- Global ---*/
body, button {font: 12px/20px Verdana, sans-serif;} /* Button needs font properties set */


/*--- Buttons ---*/
.button01{
    background-color: transparent;
    float:left;
    text-decoration: none; /* For links */
    margin-right: 10px; /* Nice margins between buttons */
    height: 30px; /* Height of the image */
    overflow: hidden;
}
    .button01 span{
        background-image:url('http://htmlwarrior.net/hotlink/button01.gif');
        display:block;
        cursor:pointer; /* Add cursor for a button in ie7 and older */
        padding-left:5px; /* So the left side of image 'shines' through */
    }
    .button01 span span{
        background-position:100% 0; /* Show the right corner */
        color:#FFF; /* Add color to span so :hover does not override buttons color */
        font-size: 10px;
        line-height:14px; /* Should be even number for cross-browser consistency */
        height: 14px;
        padding: 6px 5px 10px 0; /* top padding + bottom padding + height equals 30px */
        white-space:nowrap; /* ie7 goes to multiple lines if spaces exist */
        font-weight:bold;
        text-transform:uppercase;
    }

JavaScript

// IE Safari detect ( for button fixes )
(function($) {
    var userAgent = navigator.userAgent.toString().toLowerCase();
    if ((userAgent.indexOf('safari') != -1) && !(userAgent.indexOf('chrome') != -1) && (navigator.platform=="Win32" || navigator.platform=="Win64")) {
        $("body").addClass("safari");
    }
})(jQuery);