CSS Links:-

Styling Links:-

Link can be styling with CSS property.

this is four link states:

a:link - normal,unvisited links

a:visited - links the user visited

a:hover - links when the user mouses on the links,

a:active -link the any moment it is clicked

<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>


<p><b><a href="https://www.codesfamily.com/" target="_blank">This is Code fmaily</a></b></p>

Text Decoration in CSS:-

The text decoration is mostly using to remove underlines from links.

<style>
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
</style>


<p><b><a href="https://www.codesfamily.com" target="_blank">This is a Code fmaily</a></b></p>

Background Color:-

Background is for background color for links,

<style>
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: yellow;
}

a:active {
  background-color: hotpink;
} 
</style>


<p><b><a href="https://www.codesfamily.com" target="_blank">This is a code fmaily</a></b></p>

Link Buttons:-

<style>
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: blue;
 border-radius: 20px;
}
</style>


<h2>Link Button in code fmaily</h2>

<a href="https://www.codesfamily.com" target="_blank">This is a code fmaily</a>

CSS Links