Rollover Buttons

Rollover buttons are buttons that swap images when the cursor passes over them. These have been popular for dynamic sites for a long time, but are mostly outdated as there is a superior method for creating rollovers without the use of JavaScript – CSS Sprites.

Some of the flaws of rollover buttons:

They must use JavaScript
They frequently ‘lag’ or can experience a delay upon rollover if no image preloader is used
They also need an image preloader (this can be done with CSS by placing the image in an invisible DIV or off screen.)

Rollover buttons look like this:

Here is the code for a JavaScript rollover like the two above:

CSS Sprites

CSS Sprites are the better way to create rollovers. They do not use any JavaScript, and rely upon just CSS to slide the background image into or out of view. This button was created with CSS Sprites: click

Pressed Button Effect (With CSS Sprites)

You can also create a 'pressed button' effect with CSS sprites. The second image is merely shifted down by 1 pixel as in this example: click Here is the code for the CSS Sprites above:

click