Colly's CSS rollover generator

What are we doing here?

With this CSS rollover generator, you can create two distinct styles of rollover button, using CSS and just one image.

The difference here is that you can optionally allow some background space above your image in which to place CSS- controlled rollover text.

Standard rollover button

So, if you wish to make a standard rollover button with no text or background space, simply specify the following:

Name of class, Image, button width, Image height, border.

Multi-element rollover button

Here you can add background space above your image, and add XHTML text. You can specify rollover states for these too. You can omit any element you wish, excluding required fields. The CSS will compensate for omissions.

What you'll need

You need to prepare a "sliding door" image. I have added an example below. Basically, place the individual images side-by-side to create one collaged image. The height of this collage gives you the required Image height, and the width of one section gives you the Button width.

Make sure you upload the image to your server, and specify an absolute link in the Image field.

If you want to use a sample image, try the default setting.

What next?

The following page will give you the CSS, the XHTML, and an example of your image. Hope it's been useful.

Thanks to Malarkey for the excellent trimming form fields method used on this form.