css: Botones dinámicos

En esta ocasión se muestra un ejemplo de como crear y utilizar botones bajo la técnica de sliding doors (puertas correderas o deslizamiento de puertas) con CSS, publicada por jankoatwarpspeed.

Es mucho mejor utilizar esta técnica que utilizar imágenes de botones ya que se puede aplicar el estilo a cualquier vínculo y no es necesario crear una imagen para cada botón.

La técnica es muy simple, para conseguir que el botón se estire horizontalmente vamos a necesitar de un par de imágenes y jugar con el CSS.

Las imágenes son estas (izquierda y derecha):

Este es el CSS para el botón:

a.button {
   /* imagen derecha */
   background: transparent url('button_right.png') no-repeat scroll top right; 
   display: block;
   float: left;
   height: 32px; /* alto del botón */ 
   margin-right: 6px;
   padding-right: 20px;  
   text-decoration: none;
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
}
a.button span {
   /* imagen izquierda */ 
   background: transparent url('button_left.png') no-repeat; 
   display: block;
   line-height: 22px; 
   padding: 7px 0 5px 18px;
} 
a.button:hover span{
   text-decoration:underline;
}

y para aplicarlo, así:

<a class="button" href="aqui_tu_enlace">texto del botón</a>

el enlace se convierte en un botón o.O ..

Puedes usar las imágenes que más te gusten y darle a tus botones un toque personalizado.