HTML Link Colors


There are a few settings that can be useful for controlling the colors of text links.

By default, links will appear as follow in most of the browsers:

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

Here are the CSS properties necessary for styling buttons or tabs that lead to other parts of a web site:

  • color - to set the color of the text which represents the link
  • background-color - to add colors to the button, if links are used on buttons
  • padding - to determine the size of the button
  • text-decoration - to remove the default underline from links
  • text-align - to set the alignment of links

Let's see how we can apply color to a link:


<a href="#" style="color:green">This is green link</a>
Live Demo!


Output:
This is green link


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


<!DOCTYPE html>
<html>
<head>
<style media="screen">
a:link,a:visited {
  background-color: purple;
  border: none;
  color: #ffffff;
  padding: 15px 32px;
  text-align:center;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-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;
}
</style>
</head>
<body>

<a href="#" >This Link</a>

</body>
</html>
Live Demo!


Output:
This Link


CSS Link Color: Summary


  • You can style cursors as well by adding cursor: pointer as one of the properties.
  • Choosing the link color CSS depends on the overall design of websites. Make sure that modified styles of links do not make links more difficult to find.