CSS Links

Styling Link States

Links have different states that can be styled using pseudo-classes:

• 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.

/* unvisited link */
a:link { color: red; }

/* visited link */
a:visited { color: green; }

/* mouse over link */
a:hover { color: hotpink; }

/* selected link */
a:active { color: blue; }

Text Decoration

The text-decoration property is most often used to remove the default underline from links.

a:link, a:visited {
  text-decoration: none;
}

Link Buttons

With CSS, links can be styled to look like buttons, providing a larger, more accessible click area.

a.button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}