CSS Link Image Replacement -LIR- (CSS Buttons)

Posted by dan on Jan 2, 2011 in Web Development | 0 comments

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.

The CSS

a.menu_btn{
    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;
}
 
a.menu_btn:hover{
    background: url(http://crimsonshift.com/wp-content/uploads/button_blue.png) no-repeat  0 0;
}
 
a.menu_btn span{
    position:relative;
    left: -10000px;
}

The HTML

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

The Result:
Category Articles