Adding Hover Effects on Links With CSS

How to add hover effects on links using CSS pseudo classes.

1859 views

By. Jacob

Edited: 2021-02-05 16:08

Adding hover effects on hyperlinks is done using the CSS pseudo classes, :link, :visited, :hover, and :active; each of these may be used to control the style of a particular state.

When a link is hovered using a pointing device, such as a computer mouse or laptop touchpad, the :hover state becomes active. We can define the styles to apply for each state like this:

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

Note. The order of the declarations is important — the styles might not be applied as you expect if you change the order of the pseudo classes.

To only effect the links placed inside your article elements, you can use a descendant selector like this:

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

Transitions

To make your hover effects more interesting you may want to animate the transition between the hover state and the normal state of your links; this can be done using the transition property.

When using the CSS transition property to animate your elements, you just need to specify the properties that you want to animate, and the amount of time you want the animation to last; a basic example of how to use transition is included below:

a:link {
  color: blue;
  transition:color 0.5s;
}

Result

beamtic.com

It is also possible to animate multiple properties, you just need to separate each property with comma:

a:link {
  color: blue;
  transition: color 0.5s, transform 0.5s;
}

Result:

beamtic.com

For this example, the final CSS will look like:

a:link {
  transition: color 0.5s, transform 0.5s;
}
a:visited {color: blue;}
a:hover {
  color:red;
  transform:scale(1.1);
}
a:active {color: red;}

Accessibility and link styles

Great care should be taken when choosing link styles; while it is a common practice to remove the underline on links, this might not be the friendliest move to users who either has different or impaired vision. Some people are born color blind, and they might not be able to differentiate between casual text and hyperlinks in a body of text without a visual clue, other than color.

Differences between devices and computer monitors, and even screen brightness and contrast settings, can mean that text that is perfectly visible on your screen will be close to unreadable on another screen. This is also why light-gray text on a bright background should be avoided for body texts.

Choosing a color scheme is difficult. Choosing colors for links is difficult. You should be prepared to go back and change things later if the colors turn out not to work for your users. Just because you got a "design goal" that you want to implement does not mean that your choice of colors are practical or broadly accessible.

I have even seen big companies make the mistake to use light-gray text on a bright background, so this is a mistake that even skilled designers seem to make.

Finally, some colors simply do not work very well together. They may work for specific parts of your branding, but on your website they can cause havoc. Instead of applying your colors so aggressively that you even consider using them on your links, consider going with a more neutral choice of colors for increased usability.

Transitions

Accessibility and link styles

Tell us what you think: