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 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: