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

Learn more

Hover effects on links in CSS

This Tutorial shows how to create hover effects on your links using CSS properties.

Edited: 2014-05-27 02:53

This tutorial covers how to make hover effects on your links using the CSS pseudo-classes.

The Pseudo-classes

  1. link
  2. visited
  3. hover
  4. active

When using these classes, keep in mind that for them to work, you need to place them in the oder they are listet.


The following example will apply a basic hover effect to all of your links, and links that are hovered wil be red.

a:link { color: blue; }
a:visited { color: purple; }
a:active { color: yellow; }
a:hover { color: red; }

Note. You can also apply other styles, like text-decoration, check the CSS Reference for more properties to use. As for colors, its recommended to read the color reference.