cssbeauty is doing it with his "skilll share" and "css monster" links -- note that he does it differently on skillshare than the rest of the site though.

Rather than write some code, i will just briefly describe the concept needed. You basically want to create an unordered list of links -- give each link its own unquie class and then style that class in your css document. Give the link its unique width (of the image) and height and apply a background image (that image being your link). If you want a hover effect, simply create your image (say 40px by 22px) and double the height (now, 40px by 44px) and place the hover effect under -- this puts your "on" and "hover" state in one image file. Since you styled your link to only display a background image for the original 40px by 22px space, you won't see the hover effect. Now create a "a:hover" instance in your css for each link and simply repostion the background image up 22px, now showing the "hover" state and not displaying the "on" state.

I will say, depending on how you designed your site, you might not want the "on" and "hover state to be so close together in the image file. Go to cssbeauty homepage and then increase the font-size by one -- you will see his hover state start to show (i am assuming that is an undesired effect).