CSS Links

An HTML link redirect users to another page or page section.

They can also send email, and perform other functions with JavaScript.

Links can be styled with CSS properties like color, font-family, or background.

Link states, such as, :hover, :active, and :visited can also be styled.

Example

#

This link has a custom color and background color.

<a href="https://google.com"
   target="_blank"
   style="color: firebrick; background-color:beige;">
  Google.com
</a>

Links can be styled based on their state as follows:

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked
  • a:focus - a link that has focus

A link with different styles for each state.
Hover and click/hold the link to see the style changes.

Google.com
<style>
  /* unvisited link */
  .stylestate:link {
    color: darkblue;
  }

  /* visited link */
  .stylestate:visited {
    color: black;
  }

  /* mouse over link */
  .stylestate:hover {
    color: orangered;
    background-color: antiquewhite;
  }

  /* selected link */
  .stylestate:active {
    color: purple;
  }

  /* focused link */
  .stylestate:focus {
    color: green;
  }
</style>

<a href="https://google.com" 
   target="_blank"
   class="stylestate">
  Google.com
</a>

For details on states, see our CSS pseudo-class Tutorial

Text Decoration

The text-decoration property adds a decorating line to text.

It accepts these values: underline, overline, line-through, and none.

A link with text-decoration: none will have no underline.

A link without underline.

<a href="https://google.com"
   target="_blank"
   style="text-decoration: none">
  Google.com
</a>

For details on text-decoration, see our CSS text-decoration Property Reference.


Background Color

The background-color property sets the element background color.

It accepts different color values: color name, hex, rgb, rgba, hsl, and hsla values.

The background color may also be set to transparent value.

A link with a custom background color.

<a href="https://google.com"
   target="_blank"
   style="background: #d8dcff">Google.com</a>

For details on the background-color, see our CSS background-color Property Reference.


Styling Links As Buttons

This link appears like a button.

Google.com
<style>
  .advance, .advance:visited {
    background-color: #c6d2fe;
    display: inline-block;
    text-align: center;
    border-style: none;
    border-radius: 7px;
    padding: 20px 35px;
  }

  .advance:hover, .advance:active {
    background-color: #302ea3;
    color: white;
  }
</style>

<a href="https://google.com" 
   target="_blank"
   class="advance">
  Google.com
</a>

Did you know?

Did you know?

Disabling links

Links can be disabled by omitting a value on the href attribute or by leaving it out altogether, or by using JavaScript.

It can also be disabled using the CSS pointer-events property.

Below is a disabled link with none pointer events.

Google.com
<style>
  .not-active {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #302ea3;
  }
</style>

<a href="https://google.com" 
   target="_blank"
   class="not-active">
  Google.com
</a>

You may also like

Guides