Styling Links

Styling Links

Links have special states, style them all!

The four states

• a:link, normal, unvisited.
• a:visited, previously visited.
• a:hover, mouse over it.
• a:active, being clicked right now.

a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}
a:active {
  color: orange;
}

Rule of thumb: put them in this order: link, visited, hover, active.

Remove the underline

a:link {
  text-decoration: none;
}

Links look like buttons

a {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 4px;
}

Now the link (an <a>) looks like a nice green button.

Useful extra selectors

• a:focus, when you Tab to it (accessibility!).
• :focus-visible, only when keyboard-focus is visible.

TL;DR

• States: link, visited, hover, active.
• Order them LVHA.
• text-decoration: none removes underline.
• Style links like buttons with padding + background.
• Don't forget :focus for keyboard users.