One of the most common web design techniques is to add small icons next to hypertext links to give the user some visual indication of what the link does. A common example is to put an envelope next to an email address. There are a few ways of doing this, and with a bit of attention to detail, you can achieve a very nice effect. Let’s look at the most basic way of doing this first:

   
   you@yourdomain.com

The result, without any style:

you@yourdomain.com

Clearly the text needs coloring. A slight tweak in the css give us a color palette that is a bit more pleasing and a simple rollover effect:

a:link, a:visited {
   color:#399DCF;
   text-decoration:underline;
}

a:hover, a:active {
   color:#333;
}

you@yourdomain.com

As you can see, the image and the text aren’t quite lined up vertically, and and in non-IE browsers it looks a bit sloppy with the underline extending underneath the icon. In order to correct these problems, let’s change the markup to remove the image tag and add a class to the anchor tag:

   you@yourdomain.com

The rest is handled by CSS. We give a little left padding to the link and fill that space with a background image that is vertically aligned in the center of the line.

a.email-link:link, a.email-link:visited {
   padding-left:18px;
   background:url(/images/email.gif) center left no-repeat;
   color:#399DCF;
   text-decoration:underline;
}

a.email-link:hover, a.email-link:active {
   color:#333;
}

We now have a clean rollover underline effect and a link with a clickable icon that is aligned properly.

Filed in CSS, Tips and Tutorials, Web Design | Leave a comment →