Code has been added to clipboard!

CSS Link Color Guide with Examples

CSS Links

  • There are 4 link states: a:active, a:hover, a:visited, and a:link.
  • To avoid behavior overlapping, these states should go in the following order:
    • a:hover should go after a:link and a:visited.
    • a:active should go after a:hover.
  • To style link, CSS styling properties should be applied (e.g. CSS backgrounds, CSS color, CSS font-family, CSS text decoration, etc.).

You can add a link color CSS will use to represent the four states of links:

  • a:link – unvisited.
  • a:hover – when the mouse pointer hovers over it.
  • a:active – when a user clicks the link.
  • a:visited – visited link.

In the following example, we have all four link states with different colors:

If link is the same color as the rest of the text, it might not be noticed. Always change the CSS link color to make it stand out.

To change link color, CSS value should be assigned to the color styling property. There are several ways to describe colors. You can use color names, RGB indicators (rgb()) or HEX indicators (#ffffff).

In the following example, a CSS link is assigned a color:

I am a link

Example
a {
    color: green;
}

Don't miss a chance to try out our new Pickeristic color scale for setting CSS link colors.

This tool provides you with RGB, HSLA indicators and other codes of colors. Additionally, you can create a set of colors for your project, generate colors randomly and even mix them.

Text Decoration

By default, links are underlined in texts. It's possible to change if you need more consistency in style. To remove the underline from a link, use the CSS text decoration property.

It has four possible values: underline, overline, line-through, and none.

In the example below, the text-decoration property removes an underline from a link. We described text-decoration values for each of the link states. See how it changes once you hover your mouse over it:

Example
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Background Color

Make links stand out from the text even more by adding background colors to style link. CSS defines a color of the background with the background-color property.

The property is similar to the CSS link color. You can use the same value indicators as well:

I am a link

Example
a:link {
    background-color: green;
}

a:visited {
    background-color: blue;
}

a:hover {
    background-color: red;
}

a:active {
    background-color: pink;
}

To create a link button, use a few CSS styling properties since you have to create the box and make it interactive. You'll need:

  • color – to set the color of the text which represents the link
  • background-color – to add color to the button itself
  • padding – to determine how big your button is going to be
  • text-decoration – to remove underline from link
  • text-align – to set the alignment of your link
  • display – to describe how your link should be shown

Additionally, you can use font-family, font-size, font-weight, etc.


 

In this example, we combine several CSS properties to display links as buttons:

Example
a:link, a:visited {
    background-color: purple;
    border: none;
    color: #FFFFFF;
    padding: 15px 32px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
   font-size: 16px;
   cursor: pointer;
   display: inline-block;
}

a:hover, a:active {
   background-color: #6D0062;
}
  • Links can be styled according to their states: a:active, a:hover, a:visited, and a:link. For instance, the a:visited selector will set CSS visited link color.
  • You can add color to your link by using CSS link color and background-color properties.
  • To remove underline from link you can use text-decoration property.
  • color and background-color values can be CSS color names, RGB or HEX indicators.