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.

Mon 21st Apr 2008, 11:00am GMT (updated Mon 21st Apr 2008, 11:01am GMT)

Filed under: Client-side Coding, Design, Hints and Tips, Web

---

Comments

Add your comment

Comment	(text only; full URLs will be turned into links)
Your name
Your URL (optional)