Image by elroySF

Changing the style of your links is probably the easiest change you can make in your design.

If you aren’t sure how to do it, there is a good explanation at Echo Echo. It will show you how.

It takes only seconds to try out a new look for your links. With that in mind, here are some of the best ways to style your links, to both look good and be usable at the same time.

  1. Colored, underlined – The most common style on the internet. The coloring highlights the words as being special, and combined with the underline, users know for sure that it’s a link.

    CSS –  color: #0000ff; text-decoration:underline;

  2. Colored, with no underline – The underline isn’t always necessary. Colored text in an article’s copy rarely indicates anything other than a link. The underline does help readability in articles, but can cause clutter in a list of sidebar links.

    CSS – color:#0000ff; text-decoration:none;

  3. Bold, underlined – For minimalist designs that feature a lot of black on white, with very little color, you may not want to color your links. Putting them in bold with an underline is enough to indicate they are links, without the attention grabbing that coloring would cause.

    CSS – font-weight:bold; text-decoration:underline;

  4. Small capitals, underlined – Small capitals are another great way of making a few words stand out. The capitals alone aren’t always noticeable enough in a paragraph of text. Use an underline to make them instantly identifiable as links.

    CSS – font-variant:small-caps; text-decoration:underline;

  5. Dashed underline – The default underline style for a link is a solid line. If you set the link to have no underline, but give it a dashed bottom border, you make the common underline effect much more unique.

    CSS – border-bottom: #000000 1px dashed; text-decoration:none;

  6. Colored background – Coloring the text in a link is one option, but coloring the background is a much less common one. Colored underlines can look great here.

    CSS – background:#e0f6ff; border-bottom:#99c4d5 1px solid; text-decoration:none;

Rollover Effects

  1. Remove / Add an underline – Most of the links have an underline effect on them. The easiest way to show a rollover is to remove that underline. Or alternatively, if there is no underline, add one.
  2. Change the color – Changing the color only works if the change is big enough to make it instantly noticeable (Even with a mouse hovering over part of the word!). As such, I’d save color changes for the times when the text was black to begin with (e.g. If you used bold or small capitals).
  3. Do not use bold, italics or capitalizing – It’s tempting to add/remove bold or italics, because the change in formatting is very noticeable. However, this causes the length of the link to be increased or reduced. In a long paragraph of text, that can lead to words jumping up or down a line each time the mouse moves over a link. Very messy!

Which effect do you like most? Anything I’ve missed out?

Enjoy this post? You should follow me on Twitter!