CSS sliding doors technique for buttons, IE8 problem
- by Kelvin
Hello All!
I used sliding doors technique, explained here:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
With only one exception, that I decided to add one more image for "hover" effect.
My code works well for all browsers, except IE8 (and maybe earlier versions).
a.submit-button:active and a.submit-button:active span are simply blocked by "hover" and never work.
Does anyone knows solution for this?
Thanks a lot in advance!
<style type="text/css">
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.submit-button {
background: transparent url('images/button-1b.png') no-repeat scroll top right;
color: #fff;
display: block;
float: left;
font: bold 13px sans-serif, arial;
height: 28px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
outline: none;
}
a.submit-button span {
background: transparent url('images/button-1a.png') no-repeat;
display: block;
line-height: 14px;
padding: 6px 0 8px 24px;
}
a.submit-button:hover {
background-position: right -28px;
outline: none; /* hide dotted outline in Firefox */
color: #fff;
}
a.submit-button:hover span {
background-position: 0px -28px;
}
a.submit-button:active {
background-position: right -56px;
color: #e5e5e5;
outline: none;
}
a.submit-button:active span {
background-position: 0px -56px;
padding: 7px 0 7px 24px; /* push text down 1px */
}
</style>
And this is the button:
<div class="clear">
<a class="submit-button" href="#" onclick="this.blur();"><span>Hello All</span></a>
</div>
