Más botones animados con CSS

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

un botónanimado
varios ejemplosflexibles

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 {}

todo el botón ...es un enlace