If you are interested to learn about the CSS Icons
The link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a> or <area> element that has an href attribute. With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color
, font-family
, background
, etc.).
Example
a { color: hotpink; }
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link
– a normal, unvisited linka:visited
– a link the user has visiteda:hover
– a link when the user mouses over ita:active
– a link the moment it is clicked
Example
/* 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; }
When setting the style for several link states, there are some order rules:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Text Decoration
The text-decoration
property is mostly used to remove underlines from links:
Example
a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
Background Color
The background-color
property can be used to specify a background color for links:
Example
a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; }
Link Buttons
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
Example
a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }
More Examples
Example
This example demonstrates how to add other styles to hyperlinks:
a.one:link {color: #ff0000;} a.one:visited {color: #0000ff;} a.one:hover {color: #ffcc00;} a.two:link {color: #ff0000;} a.two:visited {color: #0000ff;} a.two:hover {font-size: 150%;} a.three:link {color: #ff0000;} a.three:visited {color: #0000ff;} a.three:hover {background: #66ff66;} a.four:link {color: #ff0000;} a.four:visited {color: #0000ff;} a.four:hover {font-family: monospace;} a.five:link {color: #ff0000; text-decoration: none;} a.five:visited {color: #0000ff; text-decoration: none;} a.five:hover {text-decoration: underline;}
Example
Another example of how to create link boxes/buttons:
a:link, a:visited { background-color: white; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: green; color: white; }