¿Cuál es la manera correcta de hacer un botón con imágenes?

[mathiasmontiel]

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?

[ArturoGallegos]

tienes que usar Sprites CSS, de esa forma solo se carga una imagen para ambos estados, yo suelo usar solo una imagen para todas las imágenes pequeñas de un sitio, de ese modo siempre cargo solo un archivo aunque tenga muchos iconos... de esa forma solo tengo que usar CSS para decirle en que posición de la imagen esta el icono a mostrar.

[mathiasmontiel]

Perfecto, eso es lo que estoy haciendo pero que pasa si quiero hacer una transición con efecto del fondo? Lo puedo hacer con css o tendré que usar jQuery?

[ArturoGallegos]

depende que transición quieras.... puedes probar con -> .btn{transiton:all 0.6 ease;}

[Rafael]

Desafortunadamente no hay transiciones de disolvencia en un mismo objeto... quizá para la cs4.

Pero afortunadamente como la semántica nos manda que normalmente un a va dentro de un li entonces prueba, como dice Arturo pero poniendo una imagen de fondo en el li y cambias el opacity con la transición.

[mathiasmontiel]

Gracias por tu respuesta Rafael, lo probaré

[pzin]

Igual si pones las imágenes que son, tal vez exista otra forma de hacer lo que quieres. Lo comento, porque yo hace algún tiempo que no uso imágenes para un menú, ya que muchas cosas se pueden realizar en CSS. Y si lo tienes hecho sin imágenes, las transiciones se podrían hacer perfectamente.