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

a:link { color: black; } /* visited link */ a:visited { color: red; } /* mouse over link */ a:hover { color: yellow; } /* selected link */ a:active { color: pink; }

Run Example

Text Decoration

The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink. underline and overline decorations are positioned under the text, line-through over it.

.under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .blink { text-decoration: blink; }

Run Example

Background Color

The background-color property can be used to specify a background color for links:

:link { background-color: yellow; } :visit { background-color: rgb(153,102,153); } :hover { background-color: #777799; } :active { background-color: green; }

Run Example

Advanced - Link Buttons

a:link, a:visited { background-color: #231e1d; color: white; padding: 13px 20px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: #5b5454; }

Run Example