El botón es un enlace simple con una clase determinada pero, su contenido está formado por una serie de etiquetas SPAN:
<a href="#" class="a-btn"> <span class="a-btn-text">un botón</span> <span class="a-btn-slide-text">animado</span> <span class="a-btn-icon-right"> <span></span> </span> </a>
- la clase a-btn-text será el texto visible
- la clase a-btn-slide-text el texto oculto que se mostrará al colocar el cursor encima del enlace
- la clase a-btn-icon-right será el contenedor de la imagen derecha
<style> /* el enlace es el contenedor */ .a-btn { background:#CDE; background:-moz-linear-gradient(#CDE, #678); background:-webkit-linear-gradient(#CDE, #678); background:-o-linear-gradient(#CDE, #678); background:-ms-linear-gradient(#CDE, #678); background:-linear-gradient(#CDE, #678); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#CDE', endColorstr='#678',GradientType=0 ); border:1px solid #89A; border-radius:20px; box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); display:inline-block; height:40px; line-height: 40px; margin:10px 0px; padding: 0 70px 0 20px; /* esto dependerá del tamaño de la imagen */ position:relative; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear; } /* el texto visible */ .a-btn-text { color:#456; display:block; font-size:20px; text-shadow:0 1px 1px #FFF; white-space:nowrap; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } /* el texto oculto */ .a-btn-slide-text { background:#456; color:#FFF; font-size:20px; font-family: Georgia; height:100%; line-height:40px; overflow:hidden; position:absolute; right:52px; text-align:left; text-indent:10px; text-shadow:1px 1px 1px #000; top:0px; white-space:nowrap; width:0; -moz-transition:width 0.3s linear; -webkit-transition:width 0.3s linear; -o-transition:width 0.3s linear; -ms-transition:width 0.3s linear; transition:width 0.3s linear; } /* el contenedor de la imagen derecha */ .a-btn-icon-right { border-left:1px solid #89A; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; height:100%; position:absolute; right:0; top:0; width:52px; } /* y la imagen */ .a-btn-icon-right span { background:transparent url(arrow_right.png) no-repeat 50% 55%; height:38px; left:50%; margin:-20px 0px 0px -20px; opacity:0.7; position:absolute; top:50%; width:38px; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear; } /* los efectos hover */ .a-btn:hover { padding-right:180px; } .a-btn:hover .a-btn-text { color:#000; text-shadow:0px 1px 1px #000; } .a-btn:hover .a-btn-slide-text { width:100px; } .a-btn:hover .a-btn-icon-right span { opacity:1; } </style>
.a-btn:hover {} .a-btn:hover .a-btn-slide-text {}
20 comentarios:
puede ser que lo use a . gracias!
Quién hubiese pensado hace unos años, encantadores :P
JMiur, ¿Cómo hago para centrar los botones?
Ya intente y no hay caso... :(
Pon al contenedor: text-align:center;
Jorge, son geniales ;), y lo que es funcionar, funcionan hasta con IE7.
Sí, May, colocando el botón dentro de un DIV con con text-align:center:
<div style="text-align:center;">
aquí el botón
</div>
Si, Emilio, funcionan en cualquier navegador aunque no se vean las animaciones pero, funcionan :D
Apoyando a Emilio digo que también son muy buenos. Lo aplicaré en uno de mis blogs.
hola soy principante y me gustaria que me ayudaras con el el llamado en html en la parte del head
No entiendo. Vas a tener que explicar más.
Saludos JMiur,
Intento colocarlo en una ENTRADA/PUBLICACIÓN; pero se ve como un enlace simple, sin embargo puesto en un gadget va perfecto.
¿Es solo para poner en un gadget?.
Gracias.
Puede ponerse en cualquier parte. Habría que ver tu ejemplo para tratr de encontrar el problema.
Gracias JMiur, probando probando, lo conseguí. Me había liado con la nueva interfaz.
Un saludo, este es mi blog de pruebas.
http://gabozan.blogspot.com/
Hola J.Miur:Es estupendo, pero no logro que me funcione el enlace;mi blog de pruebas es http://ultreia5.blogspot.com.es/
Un saludo
Porque tienes dos enlaces (etiquetas A), no sé qué código has colocado.
No entiendo...solo quiero que enlace con "http://localizarecursos.blogspot.com.es/p/acceso-de-la-ciudadania.html".¿ Cómo se añade a la etiqueta?
Como dije, no sé qué código has colocado pero tienes dos etiquetas <a donde e una hay un href con la dirección pero no se ve nada porque carece de contenido y la otra es la del botón pero el href está vacío.
Hola: Muchísimas gracias.Visto el error y subsanado.(Funciona fenomenal)
Que paciencia tienes conmigo!!!Gracias y gracias
me ha salido, pero la flecha no me sale, a que puede ser?
Imposible saberlo sin ver el ejemplo.
la misma respuesta anterior
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...