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.


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.