Submit button disappears on hover and then appears

Question

So, I use CSS: hover to replace the background of the submit button. When I click on the button, the old background image disappears (it looks like nothing exists) for a moment, and then appears again with a new background. I thought that maybe the button image file size was too big, but its only 1.4kb. Is there a way to prevent this, caching or preloading or something like that?

Answer 1

Is this just the initial page display / hover?

This will be due to the fact that the image file is downloaded only on demand, i.e. guidance action.

To avoid this, both button states should be stored in the same file. You just need to set the background-position property to display the correct half of the image for the current state.

Here is an example (note that button.png contains both image states and has a height of 40 pixels):

button { background-image: url(button.png); width: 60px; height: 20px; background-position: 0 0; } button:hover { background-position: 0 -20px; } 

Answer 2

You could perhaps use a technique similar to intention, although not execution, to Brin's answer above.

 .button {background-image: url(img/for/hover-state.png) background-position: top left; background-repeat: repeat-x; background-color: #fff; height: 1.5em; width: 5em; } .button span {background-image: url(img/for/non-hover-state.png); background-position: top left; background-repeat: repeat-x; background-color: #000; height: 1.5em; width: 5em; } .button:hover span {background-color: transparent; background-image: none; } 

The similarity that I mentioned is that both images are present in the document to avoid hover flags. When you hover the button, the background image of the span will disappear and show the state of hovering, instead of loading it on demand.

The bonus is that although I have specified height / width above, this method will work for dynamic recalibration without relying on the size of images with a fixed width (or it is as smooth as your design allows).

Answer 3

This is because it takes time to download the "hover" image before displaying it. To avoid this, you can use the sprite technique.

Example: Using sprites with INPUT for hover effect