CSS Links

Links are how visitors move around the web, so how they look and behave matters more than almost any other element on a page. CSS gives links several distinct states you can style separately, based on exactly what's happening with that link at any given moment. A link can be unvisited, already visited, hovered by a mouse, actively being clicked, or focused via the keyboard, and CSS has a pseudo-class selector for each one: :link, :visited, :hover, :active, and :focus. Styling these states thoughtfully gives visitors clear, satisfying feedback as they interact. Links don't have to look like plain underlined text either, with a bit of CSS they can be styled to look and feel like buttons across a site like cookiescursor.com.

In this page:

Link States: hover, visited, active, focus
The Correct Pseudo-Class Order
Underline on Hover
Styling Links as Buttons
Accessible Focus Styles on Links

Syntax

css

a:link { property: value; }
a:visited { property: value; }
a:hover { property: value; }
a:active { property: value; }

Link States: hover, visited, active, focus

CSS pseudo-classes let you target a link based on its current state: :hover while a mouse sits over it, :visited once a visitor has clicked it before, :active during the exact moment of clicking, and :focus when it's selected via keyboard.

Note: Even small state changes, like a slightly different color on hover, give visitors confidence that a page is responding to them.

Warning: Browsers restrict how much you can style :visited links (mainly just color) for privacy reasons, to prevent sites from detecting browsing history.

Example: Link States: hover, visited, active, focus

css

<style>
a:hover { color: red; }
a:visited { color: purple; }
a:active { color: orange; }
a:focus { outline: 2px solid blue; }
</style>
<a href="#">Interactive link</a>

The Correct Pseudo-Class Order

Because CSS applies later rules over earlier ones with equal specificity, link pseudo-classes need to be written in a specific order to all work correctly together: :link, :visited, :hover, then :active.

Note: Remember the order with the mnemonic 'LoVe HAte': link, visited, hover, active.

Warning: Writing :hover before :visited can cause the hover style to never actually show on a visited link, since :visited would override it further down.

Example: The Correct Pseudo-Class Order

css

<style>
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
</style>
<a href="#">LVHA order: link, visited, hover, active</a>

Underline on Hover

A common, subtle pattern is to keep links free of an underline by default, then reveal one only on hover, giving a satisfying bit of interactivity without cluttering ordinary reading.

Note: This pattern works especially well for navigation links, where a clean look matters but hover feedback is still expected.

Warning: If you remove the default underline entirely and skip a hover state too, links can become genuinely difficult to distinguish from plain text.

Example: Underline on Hover

css

<style>
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
</style>
<a href="#">Underline appears only on hover</a>

Styling Links as Buttons

A link doesn't have to look like plain text, adding background, padding, and border-radius can make it look and feel like a real button, while it still behaves like a normal link underneath.

Note: Button-styled links are great for primary calls to action, like 'Get Started' or Download, where you want them to stand out visually.

Warning: A link styled to look like a button should still behave like a link (navigate somewhere with href), don't disguise a button-triggered action as a link.

Example: Styling Links as Buttons

css

<style>
a.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
}
</style>
<a href="#" class="button">Get Started</a>

Accessible Focus Styles on Links

Just like buttons and inputs, links need a clear visible style when focused via keyboard, so someone tabbing through the page can always tell exactly which link is currently selected.

Note: Design a link's :focus style to be at least as visible as its :hover style, keyboard users deserve equally clear feedback.

Warning: Removing outline on links without providing a custom :focus style leaves keyboard users with no way to see which link is currently selected.

Example: Accessible Focus Styles on Links

css

<style>
a:focus {
  outline: 3px solid orange;
  outline-offset: 2px;
}
</style>
<a href="#">Tab to me to see a clear focus style</a>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Icons Next Lesson → CSS Lists