CSS Links

With CSS, link styles can be set in different ways.

Text link Text link Link Button Link Button

Set link styles

Links can use any CSS property (such as color,font-family,background etc.) to set styles.

instance

a {
  color: hotpink;
}

Try It Yourself

In addition, different styles can be set for links based on their state.

There are four link states:

  • a:link - Normal, unvisited link
  • a:visited - When the user has visited the link
  • a:hover - When the user hovers over the link
  • a:active - When the link is clicked

instance

/* Unvisited link */
a:link {
  color: red;
}
/* Visited link */
a:visited {
  color: green;
}
/* Hover over the link */
a:hover {
  color: hotpink;
}
/* Selected link */
a:active {
  color: blue;
}

Try It Yourself

If styles are set for multiple link states, please follow the following order rules:

  • a:hover must come after a:link and a:visited
  • a:active must come after a:hover

Text Decoration

text-decoration This property is mainly used to remove the underline from links:

instance

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Try It Yourself

Background Color

background-color Properties can be used to specify the background color of links:

instance

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Try It Yourself

Link Button

This example demonstrates a more advanced case where we combine multiple CSS properties to display links as boxes/buttons:

instance

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Try It Yourself

More Examples

Add Different Styles to Hyperlinks
This example demonstrates how to add additional styles to hyperlinks.
Advanced - Create Bordered Link Buttons
This is another example of how to create link boxes/buttons.
Change Cursor
The cursor property specifies the type of cursor to be displayed. This example demonstrates different types of cursors (useful for links).