Code has been added to clipboard!

CSS Link Color, Decoration, Background, States and Buttons Explained

CSS Links

We see active links in texts everywhere. They interlink content and make it easier for readers to reach the information they need. To style link CSS is as important as providing the correct URL. CSS link color is a common way to style your links and make them quickly recognizable.

This tutorial covers the ways you can style link CSS by using properties of color, decorations, and backgrounds. For instance, you will learn how to set CSS visited link color to inform users that they have already clicked on a specific link. Due to security concerns, the options of styles for a link with this selector is restricted.

 
We'll focus more on CSS link color and text decoration CSS as well as other styling properties. CSS links are a bit easier to get started with but once you have mastered them, check out the CSS buttons tutorial too.

  • We can style links using any CSS styling property (e.g. CSS backgrounds, CSS color, CSS font-family, CSS text decoration, etc.)
  • There are 4 link states: a:active, a:hover, a:visited, and a:link.
  • Special order rules apply to link state properties:
    • a:hover MUST go after a:link and a:visited
    • a:active MUST go after a:hover

As mentioned before, you can change link color CSS to represent the states of links. There are four states:

  • 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:

Example
/* A link that has not been visited */
a:link {
    color: pink;
}

/* A link that has been visited */
a:visited {
    color: blue;
}

/* A link that is hovered on */
a:hover {
    color: blue;
}

/* A link that is selected */
a:active {
    color: green;
}

If your link is the same color as the whole text, there’s a big chance it will stay unnoticed. To avoid that happening, you should always change the link color.

To change link color CSS, you need to assign a value to the color styling property. You have several ways to describe a colors. You can use color names, RGB indicators (rgb()) or HEX indicators (#ffffff).

In the following example, you'll see a CSS link with assigned color:

I am a link

Example
a {
    color: green;
}

Text Decoration

Links in text by default have underlines. However, some web designers prefer to keep the consistency and show not underlined text throughout. To remove 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, you’ll see the code example for removing an underline from a link using the text-decoration property. 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

If you want your links stand out from the text even more, you style link CSS by adding background colors to them. To define a color of the background, use the background-color property.

The property is pretty similar to the CSS link color. Moreover, you can use the same value indicators as well.

Let’s check how we can play around with background-color property:

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, you need to use a few CSS styling properties since you have to create the box itself 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 show how to 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;
}
  • You can style links based on 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 the text that represents your link using CSS link color.
  • To remove underline from link you can use text-decoration property.
  • You can make your link even more noticeable using CSS background-color property.
  • color and background-color values can be CSS color names, RGB or HEX indicators.
  • To create a button you need a few styling properties like color, background-color, padding , display, and text-decoration.