Link states demo

The HTML markup for this demo remains the same throughout. It is simply: <a href="">Test link</a>

The outputs have been styled to show you how they would look if those CSS rules had been applied and the interaction had happened. For a true working example, see the test link at the end of the article.

Static

CSS

  • a {
  • color: #246be2;
  • text-decoration: underline;
  • }

Test link
Pre-interaction CSS.

Hover

CSS

  • a:hover {
  • color: #000;
  • }

Test link
Hover CSS.

Focus

CSS

  • a:focus {
  • background-color: #246be2;
  • color: #fff;
  • text-decoration: none;
  • }

Test link
Focus CSS.

Active

CSS

  • a:active {
  • color: #f00;
  • }

Test link
Active CSS.