CSS Links

Links or hyperlinks are an essential part of any website as they help visitors to navigate through the various pages of the website.

In this tutorial, we will learn the most commonly used link properties which can help us to change the default look of the links and make them more attractive.

Have a look at the below styled links:

Links Color

CSS color property is used to set the color of the selected link.

The color value can be specified in any valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. Try out the below example to see how it works:

Example:

a{
  color: green;
}

By default, the color property(or any other property) only affects the unvisited links(not visited or active links), as you can see in the above example. But, we can also change the color(or any other property) of the link based on its current state.

A link in CSS has four different states:

• link – A normal or an unvisited link
• visited – A visited link
• hover – When a user hovers over the link
• active – The moment when the user clicks on the link

Each of the above states can be styled differently. Try out the example below to see the implementation:

Example:

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

Note: The link states should be written in a proper order. Otherwise, some of the styles may not be applied.

• A :hover must be placed after :link and :visited
• A :active must be placed after :hover

Link Text Decoration

CSS text-decoration property can be used to add or remove decorations from a CSS link.

A link can be decorated with any of the below decoration styles:

• underline – Adds an underline to the link. This is default.
• overline – Adds an overline to the link
• line-through – Adds a line over the link. This is mostly used for expired links.

Try out the example below:

Example:

.link1{
  text-decoration: underline;
}
.link2{
  text-decoration: line-through;
}
.link3{
 text-decoration: overline;
}
.link4{
 text-decoration: none;
}

Note: text-decoration: none; is mostly used to remove the default underline from the links.

Link Background Color

CSS background-color property can be used to set the background of the links.

The background-color value can be specified using any valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.

Example:

a:link{
  background-color: lightgreen;
}
a:visited{
  background-color: yellow;
}
a:hover{
 background-color: pink;
}
a:active{
 background-color: cyan;
}

Change Link’s Cursor Type

By default, a pointer type cursor appears when we hover over a link. We can however change this default cursor type.

CSS cursor property is used to set the type of cursor for a link. Try out the example below:

Example:

a.help{
  cursor: help;
}
a.progress{
  cursor: progress;
}

Make Links Look Like Buttons

Using CSS properties, we can make CSS ordinary links look exactly like buttons.

Have a look at the below buttons. They are links in reality. But, we have styled them to look exactly like buttons.

Example:

a.btn{
  display: inline-block;
  padding: 7px 11px;
  border-radius: 5px;
  text-decoration: none;
  font-family: sans-serif;
}
a.warning{
  border: 1px solid #ffc107;
  color: #ffc107;
}
a.danger{
  border: 1px solid #dc3545;
  color: #dc3545;
}
a.success{
  border: 1px solid #28a745;
  color: #28a745;
}