CSS Link Image Replacement -LIR- (CSS Buttons)

This is our own flavor of CSS Image Replacement I guess we’ll call it LIR (link image replacement) that borrows heavily from existing techniques, mainly:

  • Fahrner Image Replacement (abbreviated FIR)
  • Phark method, developed by Mike Rundle
  • Dave Shea‘s eponymous Shea method

Here’s a good article for image replacement techniques Nine Techniques for CSS Image Replacement, however, the technique we present works specifically for links.

This technique is cross-browser compatible, should work well in screen-readers, and is SEO friendly as it doesn’t require the “display:none” property used in other techniques. You also don’t need to worry about using transparent images.


    display: block;
    width: 103px;
    height: 26px;
    background: url(http://crimsonshift.com/wp-content/uploads/button_red.png) no-repeat  0 0;
    overflow: hidden;
    text-decoration: none;
    background: url(http://crimsonshift.com/wp-content/uploads/button_blue.png) no-repeat  0 0;
a.menu_btn span{
    left: -10000px;


<a class="menu_btn" title="Category Articles" href="http://crimsonshift.com"><span>Category Articles</span></a>

The Result:
Category Articles