Hide Button Text

There is a simple, but genius, method to replace button with icon. I learned it from jQuery.

First, create the button, as you would always do. You can use <button> or <input type=”button”>

<button>Next</button>

Remove the text by setting text-indent with large negative value

text-indent: -9999px;
overflow: hidden;

Finally, set the size and background on the button.

background-image: url(next.png);
width: 30px;
height: 30px;

If there is a problem with Internet Explorer, add the following two lines. Display must be set to block to prevent the button from being repositioned.

text-transform: capitalize;
display: block;


That’s what you call hack of the day!