Hola, yo siempre hice los botones de esta manera:
Código:
.boton a {background:url(imagen1.png); width:80px; height:15px; padding:5px; text-decoration:none;}
.boton a:hover {background:url(imagen2.png);}
Pero lo que pasa es que al pasar de inactivo a hover hay que esperar a que cargue la 2da imagen para poder verla, yo no quiero que haya esa interrupción. Yo veo varias páginas que tienen botones como los míos entonces la imagen tarda unos milisegundos en aparecer, pero también veo páginas que no y al pasar el mouse automáticamente la imagen ya está cargada. Me gustaría que sea así
También se me ocurrió juntar las 2 imágenes en 1 sola, una arriba de otra, y hacer el hover con background-position, así funciona perfecto. Pero si necesito usar la propiedad transition el fondo se movería al hacer hover. En este caso como podría hacer un fade in de la imagen de fondo? Se puede con ccs, y que no tenga que esperar a cargar la 2da imagen? O tendré que usar javascript/jQuery?