Pure CSS Mouse Overs

Did you know you can build nice mouse overs for your website without using any javascript? This means instant loading of the mouse over (no delay) and a more compatible website.

The concept is, we will create a background image and move it up and down depending on the hover state.

This is an example of what you need to create a mouse over button.  Note its normally 27 pixels high, which is doubled exactly to 54 pixels.

Now for my requirements, this is an order button so the HTML looks like this:


The CSS:

.pricingordernow { background-image:url("/images/order.png"); background-position:0 0; background-repeat:no-repeat; color: #d4d4d4; height: 27px; line-height: 27px; } .pricingordernow:hover { background-position: 0 -27px; text-decoration: none; }

Best of luck with it, I think you will start using mouseovers more and more now with this seamless method.