21 Apr 2008

Making Buttons ‘Bobble’

The Green Apple’s graphical buttons/links move up a pixel on rollover, and down when pressed, so that everything bobbles about when you mouse around the page.

Things like the navigation bar use background images and alter their positions to achieve this effect, but for form buttons and images you can apply class="button" and use this CSS:

.button
{
  padding:1px 0 1px 0;
}
.button:hover, .button:focus
{
  padding:0 0 2px 0;
}
.button:active
{
  padding:2px 0 0 0;
}

Older browsers (including IE6) simply won’t show any movement.