Link zu einem schicken Button geformt - IE-Version

Original: http://www.esecamalich.com/blog/before-&-after/

HTML

<script src="http://grochtdreis.de/fuer-jsfiddle/js/pie.js"></script>
<a id="button" href="#">Das soll ein toller Link sein</a>

CSS

#button {
width:225px;
height:23px;
display:block;
font-family:Arial, "Helvetica", sans-serif;
font-size:12px;
font-weight:bold;
color:#fff;
text-decoration:none;
text-transform:uppercase;
text-align:center;
text-shadow:1px 1px 0px #07526e;
padding-top:12px;
margin-left:auto;
margin-right:auto;
left:30px;
position:relative;
cursor:pointer;
border-left:solid 1px #2ab7ec;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
}

#button:active {
top:3px;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}

#button:before,
#button .before {
content:"1";
width:35px;
height:25px;
display:block;
position:absolute;
padding-top:10px;
top:0px;
left:-37px;
font-size:16px;
font-weight:bold;
color:#8fd1ea;
text-shadow:1px 1px 0px #07526e;
border-right:solid 1px #07526e;
background-image:          linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
        border-radius: 5px 0 0 5px; 
        box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

#button:active:before,
#button:active .before{
top:-3px;
        inset 0px 1px 0px #2ab7ec, 
              0px 5px 0px 0px #032b3a, 
              1px 1px 0px 0px #044a64, 
              2px 2px 0px 0px #044a64, 
              2px 5px 0px 0px #044a64, 
              6px 4px 2px #0b698b, 
              0px 10px 5px #999;
}
body {padding: 40px;}

JavaScript

// Original: http://www.esecamalich.com/blog/before-&-after/
// Versuch  mit CSS3PIE

$(document).ready(function() {

    if ( $.browser.msie) {
        $(".dots li").prepend("<span class='before'></span>");
        $('#button').each(function() {
            PIE.attach(this);
        });
    }
});