JMiur [E]

Una serie de ejemplos de botones animados con CSS3 publicados por codrops. Todos ellos hacen un uso intensivo de las posibilidades que nos dan las propiedades CSS3 pero me concentro en el el ejemplo numero cuatro que es el que más me ha llamado la atención.

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>
Ese cúmulo de etiquetas internas es lo que nos permite crear la animación ya que podemos establecer propiedades diferentes para cada una de ellas.
  • 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


Y ahora, las propiedades de estilo:
<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>

El contenedor es bastante flexible y, llegado el caso, si los textos son largos, lo que debemos hacer es aumentar los valores de estas dos reglas:
.a-btn:hover {} 
.a-btn:hover .a-btn-slide-text {}

20 comentarios:

frank  

puede ser que lo use a . gracias!

Responder
Graciela  

Quién hubiese pensado hace unos años, encantadores :P

Responder
May  

JMiur, ¿Cómo hago para centrar los botones?

Ya intente y no hay caso... :(

Emilio Cobos Álvarez  

Pon al contenedor: text-align:center;

Jorge, son geniales ;), y lo que es funcionar, funcionan hasta con IE7.

JMiur  

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

Abraham Santos Fernández  

Apoyando a Emilio digo que también son muy buenos. Lo aplicaré en uno de mis blogs.

Responder
Irving luna Gonzalez  

hola soy principante y me gustaria que me ayudaras con el el llamado en html en la parte del head

JMiur  

No entiendo. Vas a tener que explicar más.

Responder
Gabriel Bárcena  

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.

JMiur  

Puede ponerse en cualquier parte. Habría que ver tu ejemplo para tratr de encontrar el problema.

Gabriel Bárcena  

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/

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

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

JMiur  

Porque tienes dos enlaces (etiquetas A), no sé qué código has colocado.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

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?

JMiur  

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.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola: Muchísimas gracias.Visto el error y subsanado.(Funciona fenomenal)
Que paciencia tienes conmigo!!!Gracias y gracias

Responder
zxciceron  

me ha salido, pero la flecha no me sale, a que puede ser?

JMiur  

Imposible saberlo sin ver el ejemplo.

Responder
zxciceron  
Este comentario ha sido eliminado por el autor.
JMiur  

la misma respuesta anterior

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR