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.
- This is a plain nothing happens on hover link.
- This is an underline on hover link.
- This is a remove underline on hover link.
- This is a change color and remove underline on hover link.
- This is a change color on hover link.
- This is a dashed bottom border changes to solid link.
- This is a solid bottom border changes to dashed link.
- This is a no underline change color on hover link.
- This is a change background color on hover link.
- This is a dotted bottom border changes to solid link.
- This is a rainbow colored text on hover link.
- This is an overline on hover link.
- This is an underline and overline on hover link.
- This is a top and bottom border on hover link.
- This is a solid border on all sides link.
- This is a background and text color changes on hover link.
- This is a color change with transition on hover link.
- This is a bold text on hover link.
- This is a line-through on hover link.
- This is an italics on hover link.
- This is a small-caps on hover link.
- This is a text shadow on hover link.
- This is a background color with rounded corners on hover link.
- This is a URL appears on hover link.
- This is a background color plus dotted bottom border link.
Some Notes
Here are some of my musings and observations on styling text links and hover states:
- The
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
Add your own to the comments with a link to a Dabblet, Fiddle or whatever other code sharing app you prefer.
The demo button below links to the Dabblet with all the examples.
There are some things that I would never do with anchor styling: omit an underline or bottom border; omit a high-vis style that indicates focus; rely on colour alone to indicate an anchor, its hover response, or anything else for that matter; cause text to move or resize in response to a hover; rely solely on any effects that have limited support; or rely solely on a background colour to indicate anything.
OK, so that is quite a lot of bad practices. But anchors are, as you rightly point out, one of the most important aspects of a website. To willingly mess with their accessibility is really not good form, to put it mildly.
I second Ade’s comment completely. I would also suggest that one advantage of border-bottom over underline is that it does not interfere with the legibility of a character’s descenders. For example, underlined q and g look identical in some font / size combinations, and underscores often disappear into the underline. Also, border-bottom plays nice with background-color.
The style I use these days is a fairly contrasting color with a dotted border below. On :hover (and :focus*), the border becomes solid. I’ve tested the usability of this by changing my monitor to grayscale, and it’s distinct while still less obtrusive than a full border. For :active, I use a significantly brighter color, which I think is still quite distinguishable through lightness alone. For :visited, I use a darker color that’s not very distinct from the surrounding text in grayscale, but still has the dotted underline, and is definitely distinct from a non-visited link.
P.S. I don’t feel that I can fully understand the usability issues colorblind users face, but I’m doing my best. :)
*For now. I’d like to make it different from :hover, and more obvious. On at least one page I’m working on, option-tabbing through the links jumps to one link that’s isolated – and if you don’t know the default style, it isn’t easy to tell that it’s focused, as opposed to just a basic link.
One of the most common uses of CSS with links is to remove the underline. Typically it’s done so that the underline appears only when a hover occurs.
My personal preference in the past has been to have colored text with an underline that appears on hover. I find that this is the easiest to read and clear to the user. Unfortunately, tablets and other handheld devices make these effects moot as there is no hover available on a touch screen.
And I, for one, would not see your coloured text if it has no underline or border! So if your chosen anchor colour happens to have a similar brightness level to your text colour, how am I to discern anchors from surrounding text? I would have to browse with a custom user style sheet, which is fine for me but beyond the knowledge of most vision-impaired web users.
Nice run down of the basics, showing what works and what doesn’t. Personally, I think that a different colour to the text with an underline on hover is enough. People aren’t stupid and I can’t see why design should be ugly to cater for the lowest denomination! People should usually be able to tell from what the text is that it is a link and some of these options are one step away from having the word ‘LOOK’ in big letters next to it, with eyes for the ‘o’s’ and a big pointing arrow too!
Did you not read my explanation of why you need to differentiate between links and surrounding text? Have you ever tested a site through a colour-blindness filter or asked a colour-blind user or developer for feedback? Evidently not. Anchor text is rarely an indicator of the presence of an anchor, let alone a consistent and clear one. Except, of course, for the very stupid habit of beginning anchor text with “click here…” Adding a permanent bottom-border to body-content anchors is not ugly; nor does it compromise a design. Such fundamentally vital aspects of accessibility are part of good design and certainly not a barrier to it. And to suggest that colour-blind users, like me, are the “lowest denomination” is factually incorrect and astonishingly uncaring and ignorant.
Emma, don’t forget that people don’t read web pages from top to bottom, they scan. Menus are not a problem, because we can safely assume that menus contain links, even if they are not underlined. Inline links are a different matter. To make them easier to scan, not only the link text has to be meaningful (no ‘click here’, ‘more’), they also need to visibly stand out from the surrounding text.
Relying on hover alone is not an adequate indicator, because it requires a mouse. People who use a keyboard to navigate, a touch device, or voice commands will miss that clue. Relying on colour alone is also not appropriate, as explained by Ade.
I’ve never heard anyone complaining that a site was ugly because its links were underlined, but people do complain if the site is difficult to use, regardless of how attractive it is. Forcing users to guess where the links are is a well-documented and tested usability and accessibility issue (which, by the way, has little to do with user intelligence). Look up ‘link affordance’.
You missed out “squiggly hand-drawn underline” done with a background image. That can be quite nice if done subtly.
…and the obvious reminder that it’s cool to do these things on :hover, but it takes little to no effort at all to also double up the CSS selector to make the magic happen on :focus, instantly making those effects available to sighted keyboard users.
and yes, links even in their natural state should be clear enough to be easily distinguishable from surrounding regular text. just having links a different colour, with no other indication, can already be a major hindrance for users with color deficiency (an exception, of course, is where it’s clear from the context if something’s a link…say a navigation bar, list of links, etc). otherwise, it turns into a “i’ll hover my mouse over every word because it may be a link” (for color-blind users with a mouse).
Very interesting. It’s nice to see them all in one place. I have in practice also used a background image to indicate that the the link is external. This is done using CSS and attribute value matches on the href attribute where all links containing the http:// would display the external link image (which could be any number of icons to indicate the link takes one away from the site.
I’ve been doing things that could possibly make my site easy and simple to use,and I found it here, thanks.
How about some fancier CSS?
A nice glow for hover, perhaps:
text-shadow: 0 0 5px rgba(255,255,255,0.5);rainbow color hover is cool
great basic variation for normal links. Wondering if you have perform Accessibility test on these styles and how each have perform? Is there a way to know if certain style will pass AA standard or not? We are using #3 for our text links on site with color contrast which passes AA. But arguments are keep coming if on hover removing underline is AA compliant ?
CSS with links is to remove the underline. Typically it’s done so that the underline appears only when a hover occurs.
Hey: I find that this is the easiest to read and clear to the user. Unfortunately, tablets and other handheld devices make these effects moot as there is no hover available on a touch screen.