We can provide feedback to visitors with the hover and active pseudo-elements. Active usually makes sense only for elements that do something when clicked, but hover can be used for any element.
a:hover {
border-style: outset;
border-width: .15em;
border-color: orange;
background-color: rgb(90%, 90%, 90%);
}
a:active {
border-style: inset;
border-width: .15em;
border-color: orange;
background-color: rgb(40%, 40%, 40%);
}
This tells the browser to turn any link into an outset button when the mouse moves over it. When a visitor chooses the link, the browser will “inset” the button, so that it looks like it is being depressed.
Most visitor feedback focuses on mouse feedback. Remember as you design it that many computers don’t have mice: audio readers and touch-screen devices, for example, don’t use mice, and don’t currently do anything based on “hover”.
This is a garish effect, and not one I’d recommend. I use it here because it makes hover and active more obvious. A better effect might be to drop active completely, but change hover from a border to an underline. I’ve never been a fan of underlined links on a page: they remind me too much of High School English class.
Turn off underlines on links using:
a {
text-decoration: none;
}
Cause hovered links to underline by replacing the a:hover and the a:active styles with:
a:hover {
text-decoration: underline;
}
This gives our visitor some feedback that, yes, this bit of colored text is a link, and it may be worth your while to follow it—but without being garish and distracting.
