CSS Links

A link can be in four states, and CSS has a pseudo-class for each of them.

Pseudo-class	State
a:link	A normal link that has not been visited
a:visited	A link the visitor has already opened
a:hover	The mouse is over the link
a:active	The link is being clicked

a:link    { color: #0073aa; }
a:visited { color: purple; }
a:hover   { color: red; text-decoration: underline; }
a:active  { color: orange; }

---

Remove the underline

a { text-decoration: none; }
a:hover { text-decoration: underline; }

---

A link as a button

a.btn {
  display: inline-block;
  padding: 10px 22px;
  background: #0073aa;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}
a.btn:hover { background: #005177; }

On your own page, the button becomes darker when the mouse is over it.

---

Focus state

Add a:focus (or a:focus-visible) so keyboard users can see which link is selected. See CSS Outline.

---

Summary

• Style links with :link, :visited, :hover and :active, in this order.
• Use display: inline-block with padding to make a button link.
• Next: CSS Lists.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.