Ary Djmal

Let’s say you have a text button that highlights when you hovered. You can add a third state, when clicked, by specifying a:active the same way you use a:hover. No javascript needed.

In your html:

<a href="#" class="button">
  Some Text
</a>

In your css:

a.button:link, a.button:visited, a.button:hover {
  padding: 15px;
  text-decoration: none;
  color: #666;
  display:block;
  border-bottom: 1px solid #CCC;
  font-size: 12px;
}
a.button:hover {
  background-color: #F9F9F9;
}
a.button:active {
  background-color: #FFF;
  color: #333;
}

Demo