Links in CSS can be styles in different properties of CSS like color, font-family, Background etc.

In addition, links can be styled differently depending on what state they are in.

The four links states are:

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouse's over it
  • a:active - a link the moment it is clicked

Example Program :

<html>

<head>

<style>

a:link {

  color: Blue;

}

a:visited {

  color: red;

}

a:hover {

  color: black;

}

a:active {

  color: red;

}

</style>

</head>

<body>

<h2>CSS Links</h2>

<p><b><a href="https://www.letsupgrade.in" target="_blank">@LetsUpgrade</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>

</html>

Output : 

We can also add background color to the links like:

<html>

<head>

<style>

a:link {

  background-color: yellow;

}

a:visited {

  background-color: cyan;

}

a:hover {

  background-color: lightgreen;

}

a:active {

  background-color: hotpink;

</style>

</head>

<body>

<p><b><a href="https://www.letsupgrade.in" target="_blank">@LetsUpgrade</a></b></p>

</body>

</html>

Output : 

 

Buttons using LINKS :

<html>

<head>

<style>

a:link, a:visited {

  background-color: #ff0000;

  color: white;

  padding: 14px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}

a:hover, a:active {

  background-color: red;

}

</style>

</head>

<body>

<h2>Link Button</h2>

<p>A link styled as a button:</p>

<a href="https://www.letsupgrade.in" target="_blank">LetsUpgrade</a>

</body>

</html>

Output : 

And you can also decorate the texts , Can decorate the linking buttons into shapes & can also span the styles of the text using the CSS <span> tag

To learn more about CSS & its properties, follow the blogs weekly, like share & Comment & follow LetsUpgrade for more content.