Aunque es complicarse mucho para un boton, yo te propondría esto: <a href="http://www.google.com"> <span>google</span> </a>
a{display:block;background:url(path/a/tu/img-derecha.gif) no-repeat top left;padding:0 10px 0 0;} a span{display:block;background:url(path/a/tu/img-izquierda.gif) no-repeat top left;padding:6px 10px 6px 0;} a:hover{display:block;background:url(path/a/tu/img-derecha_over.gif) no-repeat top left;padding:0 10px 0 0;} a:hover span{display:block;background:url(path/a/tu/img-izquierda_over.gif) no-repeat top left;padding:6px 10px 6px 0;} Como ves son 4 img 2 para estado normal y 2 para hover. El HTML que se genera es más sencillo. Tienes que tener en cuenta que las imagenes del span deben de ser muy largas (ej:250px) así puedes aplicar esto mismo a distintas palabras y el botón se adapta. Las imagenes del deben de ser en este caso de 10px de ancho El 8 de septiembre de 2009 16:10, Ignacio Ricci <ignacio.ri...@gmail.com>escribió: > De nada > > 2009/9/8 Rafa Artacho <teme...@gmail.com> > > > Muchas gracias, se ve perfecto. > > > > 2009/9/8 Ignacio Ricci <ignacio.ri...@gmail.com> > > > > > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover .boton-izda {} > > > a.boton-wrapper:hover .boton-dcha {} > > > > > > 2009/9/8 Rafa Artacho <teme...@gmail.com> > > > > > > > Buenas tardes: > > > > > > > > Me gustaría saber si existe alguna técnica para que teniendo un botón > > > > compuesto por 3 imágenes (izquierda, medio y derecha), se pueda > aplicar > > > el > > > > efecto hover al botón completo. Tal y como lo tengo ahora: > > > > > > > > .boton-wrapper{ > > > > float:right; > > > > margin-top:5px; > > > > } > > > > a.boton-wrapper { > > > > text-decoration:none; > > > > color:#FFF; > > > > } > > > > .boton{ > > > > background:#DC002E url(../img/pixel-medio.gif) repeat-x 0 0; > > > > height:16px; > > > > float:left; > > > > width:auto; > > > > padding:5px 10px; > > > > } > > > > .boton-izda{ > > > > background:#DC002E url(../img/izquierda.gif) no-repeat 0 0; > > > > height:26px; > > > > width:4px; > > > > float:left; > > > > } > > > > .boton-dcha{ > > > > background:#DC002E url(../img/derecha.gif) no-repeat 0 0; > > > > height:26px; > > > > width:4px; > > > > float:left; > > > > } > > > > .boton:hover{ > > > > background:#DC002E url(../img/pixel_medioHover.gif) repeat-x 0 0; > > > > } > > > > .boton-izda:hover{ > > > > background:#DC002E url(../img/izquierdaHover.gif) no-repeat 0 0; > > > > } > > > > .boton-dcha:hover{ > > > > background:#DC002E url(../img/derechaHover.gif) no-repeat 0 0; > > > > } > > > > > > > > > > > > <a href="#" class="boton-wrapper"> > > > > <div class="boton-izda"></div> > > > > <div class="boton">Entrar</div> > > > > <div class="boton-dcha"></div> > > > > </a> > > > > > > > > El hover se aplica a cada uno de los divs de manera individual, > > > cambiándose > > > > de manera desigual el aspecto de botón. > > > > > > > > Gracias > > > > _______________________________________________ > > > > Lista de distribución Ovillo > > > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > > > > > > > > > > > > > -- > > > ↓ Ignacio Ricci > > > www.ignacioricci.com > > > _______________________________________________ > > > Lista de distribución Ovillo > > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > > http://lists.ovillo.org/mailman/listinfo/ovillo > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > > > -- > ↓ Ignacio Ricci > www.ignacioricci.com > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > -- Experiencia es lo que obtienes, cuando no obtienes lo que quieres. ----------------------------------------------------------------------------- "Caminar sobre el agua y desarrollar software a partir de unas especificaciones es fácil. si ambas están congeladas." Edward V. Berard, ingeniero informático. _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo