Because the web is built on links, how we style our links (i.e, anchors, or
<a> tags) should always be an important part of a site’s overall design, branding, and feel.
I’ve seen so many variations on the link style/color and hover style/color combination, that I thought it would be interesting to list as many of them here as possible. Some of these will be quite common and humdrum, while others may be ugly and impractical. I tried to stay away from really bizarre animated stuff, but instead chose to stick to those that you might actually see on a web page.
You can view the code for all of them at this Dabblet.
Here are some of my musings and observations on styling text links and hover states:
text-decorationproperty is now a shorthand property that accepts up to three different values described here; this seems to be something new
- Some of the hover styles above cause the text to move (e.g. #18, #20, #21); I think these are ugly and should generally not be used
- Some of the link styles have padding or a transparent border to improve the look and/or to prevent text movement (e.g. #9, #15, #23)
- Many of these above could be combined to create even more styles; I tried to stick to relatively normal stuff
- The “rainbow on hover” code (link #11) is shamelessly ripped off the hot links sidebar on CSS-Tricks
- If you’re using Chrome (not Canary) and the link has been visited, then you won’t see the transition (link #17); this is a known bug
The demo button below links to the Dabblet with all the examples.