Secret ingredients to quality software


Do you underline links (and include a rollover)?

Last updated by Tiago Araujo on 26 Apr 2017 02:14 am (about 4 years ago) See History

Always make links perfectly clear.

It's very important that your links stand out from the background as well as the surrounding text. A solid underline and a contrasting color is the usually the best choice, but the exact method is not important as long as the end result stands out. A link should not only be discoverable upon accidental hovering.

Rollovers are important as they offer visual feedback to a user that this link that will take them somewhere. While there is a myriad of ways to do this; you can't go wrong with an underline or border-bottom.

For more information on this, please go to SSW website.

Bad Example: The link is hard to recognize

For more information on this, please go to SSW website.

Good Example: This link is obvious

link hover

Good Example: Obvious rollover. You can test it by hovering the links on the example above

Example CSS for rollover:

a:hover { 
    color: #cc4141;
    cursor: pointer;

Figure: Example CSS for rollover effect

Adam CoganAdam Cogan
Duncan HunterDuncan Hunter
Tiago AraujoTiago Araujo

We open source. This page is on GitHub