Link Color Change Based On Status

We can easily change style links depends on its status. Mainly links are depends on four status.

1. Link
2. Hover on link
3. Visited link
4. Active link

In following article, we are change the color of links based on its status.

Write below code in html file :

<div class="wrapper">
  <h2>Different Color Of Link At Different Status</h2>
  <a href="https://www.instagram.com" target="_blank">Instagram</a>
  <div class="mt-2">
    <h3>Different status colors</h3>
    <span class="link">Link</span>&nbsp;&nbsp;
    <span class="visit-link">Visited Link</span>&nbsp;&nbsp;
    <span class="hover-link">Hover on Link</span>&nbsp;&nbsp;
    <span class="active-link">Active Link</span>&nbsp;&nbsp;
  </div>
</div>

Write below code in CSS file :

a:link, .link {
  color: rgb(238, 120, 3);
  background-color: transparent;
  text-decoration: underline;
}

a:visited, .visit-link {
  color: rgb(240, 72, 134);
  background-color: transparent;
  text-decoration: underline;
}

a:hover, .hover-link {
  color: rgb(9, 120, 110);
  background-color: transparent;
  text-decoration: underline;
}

a:active, .active-link {
  color: rgb(203, 0, 254);
  background-color: transparent;
  text-decoration: underline;
}

Output :