HTML Links - Different Colors
An HTML link shows in a different color depending on whether it has been visited, is unvisited, or is active.
HTML Link Colors
By default, an unvisited link is underlined and blue, a visited link is underlined and purple, and an active link is underlined and red. You can change these state colors with CSS, using a:link, a:visited, a:hover, and a:active.
Example
Custom colors for each link state, plus a hover effect.
Prompt
A page that uses CSS to color the four link states: unvisited green with no underline, visited pink with no underline, hover red with underline, and active yellow with underline. Include a sample link in the body.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="https://prompt-cookbook.com">This is a link</a></p>
</body>
</html>
Link Buttons
A link can also be styled to look like a button using CSS.
Example
A link styled as a button.
Prompt
A page that styles a link to look like a button using CSS (red background, white text, padding, no underline, inline-block), with a darker red on hover/active. Include a sample link reading "This is a link".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
HTML Link Tags
The main tag here is <a>, which defines a hyperlink.