Quick Tip(s): Using CSS to hide button text

Just a few quick tips today about using css to hide button or link text. This is especially useful when you can’t form alter to make the .

First of all, make sure to set this rule: text-align: left; Otherwise, the indent won’t work! Also, make sure that these rules are set as well: white-space: nowrap; overflow: hidden; (or outline: none;) text-indent: -9999px; Since text-indent only indents the first line, you have to make sure that there is no wrapping, especially if the text you are trying to hide is quite long. Overflow: hidden and outline: none stop that weird little dotted selection box from appearing when you click the button or link.

Hope this helps!

P.S. - Make sure your button or link has a meaningful/helpful alt text so that screen readers will still work.