HSC 2011 - Button (1st Variation)

A variation on the HSC 2011 button to avoid IE7 z-index issues.

by Travis

HTML

<div class="Button">
    <div class="ButtonIcon"><img src="http://i.imgur.com/Y4vqa.jpg" /></div>
    <div class="ButtonText">
        <div class="ButtonTitle">The Button</div>
        <div class="ButtonCaption">A link of destiny.</div>
    </div>   
</div>

CSS

/* Style 2 */
.Button {width:220px; height:50px;position:relative;}
.ButtonIcon {width:110px; height:50px; background:#0079c1; overflow:hidden; position:relative; z-index:1; float:left;}
.ButtonIcon img {width:110px;}
.ButtonText {width:220px; height:50px; background:url('http://i.imgur.com/6OA6h.png') no-repeat; position:absolute; top:0px; left:0px; z-index:2;}
.ButtonText:hover {background:#FFF;}
.ButtonTitle {position:absolute; top:7px; right:5px; text-transform:uppercase;}
.ButtonCaption {position:absolute; top:27px; right:5px; font-size:12px;}


/* Style 2 
.Button {width:220px; height:50px; background:#0079c1; position:relative;}
.ButtonIcon {width:50px; height:50px; position:absolute; right:0px; background:#eeb211;}
.ButtonText {width:140px; height:40px; color:#fff; position:absolute; left:0px; padding:5px; float:right;}
.ButtonTitle {margin:11px 0px 0px 0px; text-transform:uppercase;}
.ButtonCaption {display:none;}
*/