Question

My current code is:

CSS:

.submitorder {
background-image: url('https://www.amleo.com/images/art/PON1.jpg');
width: 205px;
height: 52px;
font-size:0px;
}

.submitorder:hover {
background-image: url('https://www.amleo.com/images/art/PON2.jpg');
width: 205px;
height: 52px;
font-size:0px;
}

The HTML is simply:

<div><input type="submit" class="submitorder"/></div>

The page that I have this on is at:
https://www.amleo.com/checkout.aspx

Should I combine the images into 1 image? How would I move what the user is seeing down to the next half of the image on hover?

Just trying to get a sense of what’s good / bad / ugly. 🙂

Thank you.

Answer 1

have a look at the css sprites: http://css-tricks.com/css-sprites/

you should create something like this:

your sprite >

(done with csssprites.com/ )

then use:

.submitorder {
background-image: url('sprite.jpg');
background-position: 0px 0px;
width: 205px;
height: 52px;
font-size:0px;
}

.submitorder:hover {
background-position: 0px -62px;
}