Links can be styled differently depending on what state they are in. There are four links states.

  1. a:link - a normal link

  2. a:visited - a link the user has visited

  3. a:hover - a link when the user mouses over it

  4. a:active - a link the moment it is clicked

While setting the style for several link states, follow the same order. a:hover must come after a:link & a:visited and a:active must come after a:hover.

Remove Underline From Links

The text-decoration property is mostly used to remove underlines from links.

a:link {
text-decoration: none;

Link Buttons

Several CSS properties can be combined to display links as buttons or boxes. For example:

a:link, a:visited {
background-color: #000088;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;

a:hover, a:active {
background-color: #000066;