Link Colors
HTML Link Colors
A link will look like this by default (in all browsers):
- A blue-underlined link has not been viewed.
- A clicked link appears purple and underlined.
- A link that is active is highlighted in red.
Using CSS, you may alter the link state colors:
Example
An unvisited link in this case will be green and ununderlined. A clicked link will have no underlining and be pink. A link that is active will be highlighted in yellow. Furthermore, a link (a:hover) will highlight and turn red when you mouse over it.
<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>
Link Buttons
Using CSS, a link can also be stylized like a button:
Example
<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>
