By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Effects on Links in HTML and CSS

How to add a hover effect to your links, and control the appearance of visited or active links.

Edited: 2012-10-24 16:51

Most designs call out for some effects on links, these "effects" can be anything from basic changing of colors when the links are hovered by the mouse, to complex button designs. The effects on links are controlled trough CSS properties and the CSS pseudo-classes, these classes control what will happen when a link is hovered, has been visited, or is currently active.

Adding effects to HTML links can be an important step towards spicing-up your designs. Most sites have some effects in place on their links – this is a good thing, as it can improve the usability of the site, when done right!

Its generally a good idea to give visited links a different color – especially if you have many links on a page – it is not as important with the navigation section that contain links for your Privacy Policy, About, and Contact pages. Such a section is common for many websites.

Hover effects on links

What most people want to learn, is likely how they add a hover effect on their links. Such as links turning red when they are hovered with the mouse – a good design goal – but you also shouldn't neglect your visited links. Changing what happens when you hover a link with the mouse can be done with the below piece of CSS:

a:hover { color: red; }

As you can see, its pretty easy to change color of your links when they are hovered. It can quickly become difficult if you have multiple sections on a page – for instance, a navigation section and a content section. In such cases, it is important that you don't fear the use of classes and ids, they will make your job a lot easier in the long run.

.content a:hover { color: red; }
.navigation a:hover { color: red; }

Other Link Effects

Of cause hover effects isn't the only possible thing you can change about your links. The following will change the styles for Unvisited, visited, hovered, and active links. The :Active selector will however only apply to the link while the user is clicking it, it will not apply to the link for the page that they are currently viewing – functionality like this is best achieved with scripting.

The :link pseudo-class is used to select unvisited links. The :visited class will select visited links – the browser remembers what pages you visit, clearing the history resets this memory. The :active class select the currently active link – can be hard to notice. And finally the :hover class, used to select links currently being hovered.

The Ordering of your Declarations

The order of your declarations can also be important, this is due to specificity in CSS – not a browser bug. For example, placing :link after :hover would overrule the declarations set previously. This is how not to do it:

a:visited {}
a:hover {}
a:link {}
a:active {}

The recommended order is therefor as follows:

a:link {}
a:visited {}
a:hover {}
a:active {}