Home / HTML / Links / Link Colors

HTML Link Colors

What are Link Colors?

Links have different states (unvisited, visited, hover, active) that can be styled with CSS. By default, browsers style links with specific colors, but you can customize these colors to match your website's design.

Link States

Links have four different states that can be styled:

1. a:link - Unvisited Links

The default style for links that haven't been visited yet.

Example
<style>
    a:link {
        color: blue;
    }
</style>
<a href="https://example.com">Unvisited link</a>

2. a:visited - Visited Links

The style for links that have been visited before.

Example
<style>
    a:visited {
        color: purple;
    }
</style>
<a href="https://example.com">Visited link (click and return)</a>

3. a:hover - Hover State

The style when the mouse pointer hovers over a link.

Example
<style>
    a:hover {
        color: red;
        text-decoration: underline;
    }
</style>
<a href="https://example.com">Hover over this link</a>

4. a:active - Active State

The style at the moment the link is clicked.

Example
<style>
    a:active {
        color: green;
    }
</style>
<a href="https://example.com">Click this link</a>

Complete Link Styling Example

Here's an example that styles all link states:

Example
<style>
    a:link {
        color: #4b3190;
        text-decoration: none;
    }
    a:visited {
        color: #800080;
        text-decoration: none;
    }
    a:hover {
        color: #fdbb30;
        text-decoration: underline;
    }
    a:active {
        color: #ff0000;
        text-decoration: underline;
    }
</style>
<a href="https://example.com">Styled link</a>

Important Order of Pseudo-Classes

The order of pseudo-classes matters! They should be in this order:

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

Remember the mnemonic: LoVe HaTE (Link, Visited, Hover, Active)

Text Decoration for Links

You can control whether links are underlined:

Example
<style>
    .no-underline a {
        text-decoration: none;
    }
    .underline-hover a {
        text-decoration: none;
    }
    .underline-hover a:hover {
        text-decoration: underline;
    }
</style>
<div class="no-underline">
    <a href="#">No underline</a>
</div>
<div class="underline-hover">
    <a href="#">Underline on hover</a>
</div>

Background Colors for Links

You can also style the background color of links:

Example
<style>
    a:link {
        background-color: #f0f0f0;
        padding: 5px 10px;
        text-decoration: none;
    }
    a:hover {
        background-color: #4b3190;
        color: white;
    }
</style>
<a href="https://example.com">Link with background color</a>

Button-Style Links

You can style links to look like buttons:

Example
<style>
    .button-link {
        background-color: #4b3190;
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 5px;
        display: inline-block;
    }
    .button-link:hover {
        background-color: #fdbb30;
        color: black;
    }
    .button-link:active {
        background-color: #333;
        color: white;
    }
</style>
<a href="https://example.com" class="button-link">Button Link</a>

Default Browser Colors

By default, browsers use these colors:

Best Practices

← HTML Links Link Bookmarks →