HTML Link Colors and Effects

Browsers assign default colors to an HTML link depending on whether it has been visited, is unvisited, or is active.

Default Colors

By default, a link will appear like this in the browser:

1. An unvisited link is underlined and blue
2. A visited link is underlined and purple
3. An active link is underlined and red

How to Modify

You can use CSS to modify link colors and styles. For example, the below CSS will display an unvisited link as orange with no underline, a visited link as purple with no underline and an active link as red with an underline. 

a:link {
 color: orange;
 text-decoration: none;
}
a:visited {
 color: purple;
 text-decoration: none;
}
 
a:active {
 color: red;
 text-decoration: underline;
}

Links as Buttons

You can also style a link as a button, by giving it a background color, border, padding and some other CSS properties as shown in the example below.

a:link {
    background-color: #000000;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

Link Hover Effect

You can also customize the hover effect (when mouse cursor is placed on the link) of any link using CSS. 

For example in case of a text link, you can change the hover text color or text decoration using the following CSS:

a:hover {
    color: green;
    text-decoration: underline;
}

Similarly, in case of a button link, you can change the background and text color on hover using the following CSS:

a:hover {
    background-color: green;
    color: white;
}

Please check below options for the links to our previous or next tutorial.