A New Way To Style Your Buttons

Recently, I designed a website and I decided to do a unique style on the search field. I added a background image to the input field and then a background image to the submit button. Everything looked great until I viewed it in Internet Destroyer (Internet Explorer). That’s when the sky fell on my head…as usual.

The Issue:

I was not able to hide the text from the button, letting the underlying image to show it’s text. Normally my preferred image replacement technique is to have text in the background image and then use a negative text-indent at a high number like this:

background-image: url('my-picture-with-text.jpg');
text-indent: -9999px;

This works fine with submit buttons on most browsers, except IE.

The fix:

Add 2 extra lines to your css file:

color: transparent;
text-transform: capitalize;

For some reason the text indent dosn’t work by itself in IE, so after adding these 2 lines it works. It is a hack within a hack though, the color:transparent property should work by itself, but it doesn’t. For some odd reason setting the text-transform to anything (in this case I chose capitalize because I don’t use it very often) makes it magicly work. Anyhow if anyone finds this useful please leave a comment below.