Categories
CSS Web development

CSS Styling Links

How to add the link to the HTML document, you can find in my previous posts (click here to see the post). To improve the look of your web page you can style your links in CSS.

*to see the code of the CSS link animation above on the website click here.

Links can be styled with any CSS property like color, font-family, background and etc…

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: #2a9d8f;
}
</style>
</head>
<body>

<p><b><a href="" target="_blank">This is a link.</a></b></p>

</body>
</html>

Output:

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

a: link – unvisited link.
a: visited – visited link.
a: hover – a link when the user hovers over it.
a: active – a link the moment it is clicked.

When setting the style for several link states, there are some order rules:

a: hover MUST come after a: link and a: visited
a: active MUST come after a: hover

Example:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: #2a9d8f;
}

/* visited link */
a:visited {
  color: #264653;
}

/* hover over link */
a:hover {
  color: #f4a261;
}

/* selected link */
a:active {
  color: #e76f51;
}
</style>
</head>
<body>

<p><b><a href="" target="_blank">This is a link.</a></b></p>


</body>
</html>

Output:

The background-color property can be used to specify a background color for the links. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: #2a9d8f;
  color: #e9c46a;
}

a: visited {
  background-color: #264653;
}

a:hover {
  background-color: #f4a261;
}

a:active {
  background-color: #e76f51;
}
</style>
</head>
<body>

<p><b><a href="" target="_blank">This is a link.</a></b></p>


</body>
</html>

Output:

Examples of more advanced buttons: 

Example 1

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #2a9d8f;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: #264653;
}
</style>
</head>
<body>

<a href="" target="_blank">This is a link.</a>

</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid #2a9d8f;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: #2a9d8f;
  color: white;
}
</style>
</head>
<body>

<a href="" target="_blank">This is a link.</a>

</body>
</html>

Output:

Enjoy coding!