Skip to navigation

malevolent design weblog

This blog is now defunct, but you can find more stuff over at my personal site

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.


Comments


Comments are now closed for this entry.