Prevent background image flashing on change

Question

I\'m using background image for a button and switch to a different one on :hover.

When the switch happens on the first mouse over it briefly flashes the bac

Answer 1

Since the hover background image will not be pre-loaded, so that it shows the flashing effects especially for larger image size and longer loading time.

It can be fixed easily by using CSS sprites, e.g. combine the 2 background images into 1, and change the background-position on :hover, say the new image is 400px (200+200) height.

And, don't set any background-color to stop the initial flashing of the background color on page load. Also, width and height won't apply to inline-level a tag unless you change it to display: inline-block or block etc.

.backgroundbutton {
  background: url("https://i.imgur.com/lrlOvEP.png") 0 0 no-repeat;
}

.backgroundbutton:hover {
  background-position: 0 -200px;
}

hover over me

In addition, you don't need any images for gradient background, e.g.:

.backgroundbutton {
  background: linear-gradient(to right, #999, #fff);
}

.backgroundbutton:hover {
  background: linear-gradient(to right, #ccc, #fff);
}

hover over me