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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *


2 − = one

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>