Monday, May 24, 2010

Replacing Link Text with an Image using CSS

To replace link text by an image using CSS. This works for most of the browsers - tested on IE8, FF, Chrome...
<html>
<head>
 <style>
  a.enlarge{ 
   width:67px; /*width of the image used*/
   height:21px; /*height of the image used*/
   text-indent:-9000px; 
   display:block; 
   float:left; 
   margin-right:4px; 
   margin-bottom:4px;
   background:url('/images/enlarge.png') top left no-repeat;
  }
  a.enlarge:hover{
   background:url('/images/enlarge_hover.png') top left no-repeat; 
  }
  </style>
</head>
<body>
<a href="#" class="enlarge">enlarge</a>
</body>
</html>

No comments: