I’ve used CSS to turn a list into a navigation bar and really like how clean and simple the resulting html code is. When there is only one link, for say a button, I use the following code to get an image link with a hover effect:

CODE:

1. <a href=”more.php” id=”btn-more” ><b>learn more</b></a>
2.  
   
3. #btn-more {
4. background: url(”../_images/btn-more.gif”) no-repeat;
5. width:75px; /* the width of your button image */
6. height:21px; /* half the height of your image */
7. display:block;
8. text-decoration:none;
9. }
10. a:hover#btn-more {
11. background-position: 0 -21px;
12. }
13. #btn-more b {
14. display:none;
15. }

For the image I made a GIF with both the normal and over button states


and here is the final link: learn more

This entry was posted on Monday, October 2nd, 2006 at 4:54 pm and is filed under css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.