Cross Browser Compatible Sprite Buttons
Friday, March 5th, 2010
You want to turn a button into a sprite, but you also want to have the text there for accessibility!
What do you do? You use the text indent property:
text-indent:-6000px; overflow:hidden; cursor:pointer;
Have you checked IE7? If the text is still there, try this:
color: transparent; text-transform: capitalize;
Yes, it is a hack, but it works great. And yes, you do have to have the capitalize transform or else it won’t work.
Here is everything you need to get your super awesome usable sprites working across all browsers:
.mybutton{background:transparent url(”mybackground.png”) 0 0 no-repeat; border:none; text-indent:-6000px; overflow:hidden; cursor:pointer; color: transparent; text-transform: capitalize;}
have fun!