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>

Button Sprites with text

Edited 4/30/2009: New findings see Button Sprites with Text Part 2 - An ANSWER!

--------------------------------------

Button Sprites. I love em. Changing a background of a text link instantly to make hover and stuff is awesome.

Though what is the proper solution when you want the words to be stylize in the graphic and you do not want to use the default text in the browser?

Unusually I find this version often. It will take the text in the span and position it -9999em to the left. Unfortunately you get the crazy active highlight that expands all the way to the left and out of view.

<a class="CLASSname"
href="http://www.blogger.com/LINK" title="Click Here" >
<span>Click Here</span>
</a>

I have also seen the use of the dreaded clear.gif or spacer.gif. This takes advantage of the alt text for accessibility. It seems right but what a waste of extra code and bandwidth even if it is only 43ish bytes.

<a class="CLASSname"
href="http://www.blogger.com/LINK" title="Click Here" >
<img src="/clear.gif" alt="Click Here" />
</a>


New Findings See Button Sprites with Text Part 2 - An ANSWER!
If you would like to make a comment make it at the newer posting.