List of 10+ usability-conscious link styles

Below you can see all the examples of the link hover effects grouped together. At the end of the page there are some more advanced styles that take advantage of CSS3.

Link styles

Using color and underline

Using backgrounds

Using border instead of text-decoration

Advanced link styles using CSS2.1 and CSS3

Some of these effects require Safari or WebKit browser, some require Firefox or Opera. I’ll mention the support next to each link.