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
