HTML Link Colors

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Link Colors

By default, a link will appear like this (in all browsers):

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

You can change the link state colors, by using CSS:

Example

Here, in the below example an unvisited link is green in color with no underline. A visited link will be pink with no underline. An active link is yellow and underlined. In addition, when mousing over a link (redlink: hover) it will become red and underlined:

<!DOCTYPE html>
<html>
<head>
<style>
.redlink:link {
color: green;
background-color: transparent;
text-decoration: none;
}
.redlink:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
.redlink:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
.redlink:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a class=”redlink” href=”html_images.asp” target=”_blank”>HTML Images</a>
</body>
</html>

Output:

Link Colors

You can change the default colors of links

HTML Images

Link Buttons

A link can also be styled as a button, by using CSS:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.blulink:link, .blulink:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

.blulink:hover, .blulink:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a class=”bluelink” href=”default.asp” target=”_blank”>This is a link</a>
</body>
</html>

Output:

Link Button

A link styled as a button:

This is a link