Button Sprites with Text Part 2 - An ANSWER!

As you may already know I love button sprites you may already too! In an earlier post Button Sprites with Text I showed 2 versions. Unless someone has a better argument I think the SPAN-ed the text version is the best.

My original problem was the silly "active highlight that expands all the way to the left and out of view." See the top button in the following example. What the hell is that!


Well my friends.... "outline:0 none;" saves the day! Below you can see the code in action.

Now, normally I would say don't remove this outline. It is probably a very helpful for assistant technology users. Though if you are using :hover, :active, and :focus I think you may be indicating the actions that are happening anyways.

CSS Solution
a:link, a:visited{
position: relative;
display:block;
width:200px;
height:30px;
background: url(/images/buynow.png)no-repeat 0 0;}

a:hover, a:active , a:focus {
outline:0 none; /% this removes outline. %/
background: url(/images/buynow.png) no-repeat 0 -50px;}

a span{
position: absolute;
top:0; left:-9999em;}


HTML Solution
<a href="">
<span>Buy Now</span>
</a>