fecklessmind.

List of 10+ usability-conscious link styles done in CSS

I’ve often felt like plain text links are the most neglected part of every site. To help other designers, I’ve decided to compile a list of link styles that I’ve used before or have seen around the internet.

The main reason why most sites use similar styles of links is to avoid confusing their users. When compiling my list, usability was a very important criteria for me and I excluded anything that did not look like a link at first glance. Feel free to have a peek at the actual list right now.

In this post, I will first go over the usability conventions and then explain how to design great link styles that respect them. I will also explain the code behind the more intricate CSS3 examples.

Embracing the usability restrictions

Nobody wants to confuse their users, that’s a given; however, even keeping this in mind, a lot more can be done with links, given that you understand the conventions they have to follow.

• Color — This is one of the main things to consider when designing a link. Studies show that an effective link has a distinct color, different from the main content color.
• Contrast — It is important to consider the contrast of the link with the main content and with the background of the page. An effective link will stand out, but won’t overshadow the rest of the text (unless it is intended to do so).
• Style — There are many styles that can be applied to links: adding underlines, making them bold, changing font family, and more. A link should not have the same style as other elements on the page.
• Behavior — Often, links are unsuccessful simply because they do not behave the way users expect them to. The hand cursor, change of style upon hover, immediate response — these are all important behaviors of a successful link.

Keeping in mind these restrictions, you can easily design effective and good-looking links. Some of the CSS properties that can be used are: background, color, font, text-decoration, border, etc. Many combinations can be found, while following the conventions mentioned above.

I would like to warn you against using links that are the same color as the content around them, even if they have other styling; they will be difficult for most people to identify and could be mistaken for emphasized text. I’m an experienced user and I still have issues with those.

Having a hard time? Have a look at my examples.

Explaining CSS2.1 and CSS3 progressive enhancements to links

Once you have a basic link style, why not play around with it and reward the users of good browsers with something extra. These will be little things that will enhance the experience of those users, but will not impact the users of older browsers. You might know it as progressive enhancement. You can see the code for some of these enhancements below:

/* css3 - has background if external */
a.has-background-if-external[href^="http"], a.has-background-if-external[href^="https"]
{padding: 0 10px 0 0; background: url(external.png) 100% 0 no-repeat; color: #ff0066;}
a.has-background-if-external:hover {color: #0c7fce;}

/* css3 - add shadow */
a.add-shadow {color: #ff0066;}
a.add-shadow:hover {text-decoration: none; text-shadow: #FFB1D0 1px 2px 3px;}

/* css3 - adds background, animated */
a.add-background-animated
{background: #fff; color: #ff0066; -webkit-transition: background-color .5s linear;}
a.add-background-animated:hover{background: #FFAECE;}

/* css3 - changes background, animated */
a.change-background-animated
{padding: 2px; background: #ffe300; color: #000; text-decoration: none; -webkit-transition: background-color .5s linear;}
a.change-background-animated:hover {background: #ff0066;}

/* css3 - show tooltip */
a.show-tooltip {position: relative; color: #ff0066; text-decoration: none;}
a.show-tooltip:hover {color: #0c7fce;}
a.show-tooltip:hover:after
{content: attr(href); position: absolute; left: 1em; top: 2em; border: 1px solid #666; padding: 0 10px; background: #f1f1f1; color: #666; font-size: .715em;}

The first example will show a little icon next to links that are going to take the user outside of your site. It’s done with CSS2.1 attribute selectors. The second example adds a little drop shadow upon hover, using the CSS3 property text-shadow that is currently supported by Safari and Opera.

Personally, I’m using the fourth example — background color transition — in my article navigation. This little trick works only in Safari 3+ and similar WebKit browsers, but it’s a very cool effect for those users and it doesn’t require any JavaScript. It is done using the -webkit-transition property, which you can learn more about in its spec.

If that sounds interesting to you, have a look at the example file. Make sure to hover the links to see the full style, especially the ones in the last section.

Do you know or use any link styles not mentioned in this article? Please, post a comment and let me know!