Basic CSS Sprite Rollover

Posted on Jun 9, 2010 in CSS | 0 comments

Your CSS Code

#home_button{
       display: block;
       background: url(home_sprite.png) no-repeat;
       height: 30px;
       width: 80px;
}
#home_button:hover{
      background-position: 0 -30px;
}

Your HTML:

    <a href="www.yourlink.com" id="home_btn" ></a>

Your sprite image should be arranged or designed like this:

Example: