Link Colors
- In standard browser settings, links are presented as follows:
- An unvisited link is blue and underlined.
- A visited link changes to purple and remains underlined.
- When clicked (active), a link turns red and is underlined.
Click to Learn
Example
In this setup, unvisited links will appear green without an underline. Once a link is visited, it will change to pink without an underline. When a link is active, it will be yellow and underlined. Additionally, hovering over a link (a) will change its color to red and add an underline.
|
<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
A link can also be styled to look like a button using CSS.
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> |
