Little things like a split second delay between a normal state and hover state image on buttons can just ruin the entire user experience of a website. It's sad, but that's just how neurotic we are!

Preloading the image is, of course, the solution, and we can do this in a number of ways depending of the circumstances. I'm not going to list them all: I just want to share this little CSS only technique I stumbled upon. This is the case: we have a background image for a button and want to exchange it for another background image on hover state, without the delay, with CSS, and without using sprites (because it can be an animated GIF for example).

#the-button {
  background-image: url('images/img.gif');
}
#the-button:before {
  content: url('images/animated-img.gif');
  width:0;
  height:0;
  visibility:hidden;
}
#the-button:hover {
  background-image: url('images/animated-img.gif');
}

That's it. Hope this is useful to anyone.

Reacties

Thanks

Thanks , very useful !

Reactie toevoegen

Plain text

  • Geen HTML toegestaan.
  • E-mail- en internetadressen worden automatisch aanklikbaar.
  • Regels en alinea's worden automatisch gesplitst.
By submitting this form, you accept the Mollom privacy policy.