The hyperlinks of today look way better than they did five years ago. Designers and developers have become better and better at styling links to not only be usable, but beautiful as well. We know how to indicate the basic behavior of a link using only color (for example, red usually indicates a destructive action). And we know how to style links to give them a stronger affordance of click-ability.

Most web applications make clever use of the :hover pseudo-class, which allows us to tweak link backgrounds to add an even stronger affordance of click-ability, and draws the eye to the link, which focuses the user on task at hand. All of 37signals’ apps provide great examples of tasteful rollover link styles.

When we begin to think about rollover styles, we’re no longer thinking about how the app looks. We’re thinking about how it feels. Different styles for link rollovers make a page feel much more responsive. Everybody these days knows this, and takes advantage of it.

Unfortunately, few people take advantage of the :active pseudo-class, which allows you to style the link differently while it’s being clicked. This is just as important, if not more important than the rollover state. Changing a link’s :active style provides immediate visual feedback that the link is being clicked.

Try each of the following links. See which feels better.

The chances of a person successfully completing a task increase with the level of feedback that that he/she receives before, while, and after performing that task. (if you’ve read The Design of Everyday Things, you know what I’m talking about). With links, the “before” feedback can be achieved using :hover styles, and the “after” feedback is usually just the browser doing something, be it going to a different page or just updating something dynamically. The “during” feedback can be achieved by simply using a good :active style.

Now, just as much thought must be given to a link’s :active style as to its :hover style, if not more. Usually, a click is less than a second, so changing the style too much can be distracting, and actually do more harm than good. I’ve found that the best :active styles tend to just make the background a bit darker. I first saw this on flickr (which was where I first noticed the :active state in use and fell in love). You might also think about adding an underline during the click. Experiment and see what works best for you.

One thing’s for sure though. Once you feel the difference in your web apps between a good :active style and a non-existent one, you’ll wish every site made use of them.