« Back to home

CSS Tip: Three-State Buttons

August 12th, 2008 by ary

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:

1
2
3

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

In your css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

Recommend Me