Advanced Search

Simple CSS Image Rollover link

/ Published in: CSS
Save to your folder(s)
A simple way to style a link using a CSS sprite. On hover, the image is moved upwards by the image height to reveal the rollover image.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. #emailUs
  2. {
  3.   display: block;
  4.   width: 107px;
  5.   height: 23px;
  6.   background: url("emailUs.gif") no-repeat 0 0;
  7.  
  8. }
  9.  
  10. #emailUs:hover
  11. { 
  12.   background-position: 0 -23px;
  13. }
  14.  
  15. #emailUs span
  16. {
  17.   position: absolute;
  18.   top: -999em;
  19. }

URL: http://www.elated.com/articles/css-rollover-buttons/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.