Con este tutorial aprenderemos a crear botones CSS con un aspecto muy “acabado” con dos estados, reposo y presionado. Con esta técnica ahorramos mucho tiempo y recursos en la parte gráfica y básicamente, el resultado final es muy bueno. Este tipo de botón es el que vamos a aprender a crear:
Esta técnica, principalmente se usa porque queremos que nuestros botones puedan ser super-flexibles, esto quiere decir que la imagen de fondo del botón aumente de tamaño junto al texto del botón. Para ello, usaremos dos imágenes complementarias que juntas, nos creará la ilusión de ser una sola.
Para ello, usaremos la etiqueta <a> para crear el botón y la etiqueta <span> para el texto contenido dentro de él. Este sería un ejemplo del código HTML:
<a href="#" class="button"><span>Texto del boton</span></a>
Vamos a incluir los dos estados en una sola imagen. Para cambiar entre el estado de reposo y el presionado, simplemente cambiaremos la posición de la imagen de fondo verticalmente (a esto se le llama sprite). Esta técnica basada en CSS nos permite realizar el cambio sin necesidad de utilizar JavaScript ni dos imágenes para conseguir el efecto. Para combinar las dos imágenes y aplicar la téctica de puerta corredera, la parte de la imagen que tendrá en cuenta el texto del botón se establece en unos 300px (dependerá de los textos, pero vamos, que 300px parece ser un ancho razonable). La altura vamos a establecerla en 24px.
Por último, necesitamos un poco de CSS para poner todo esto junto y en su sitio. Como puede ser que deseemos alinear varios botones en horizontal, vamos a hacer que floten (float:left) de forma predeterminada.
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Y ahora, como toque final, vamos a añadir el estado “presionado”
a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
¡Ya está!, ahora vamos a añadir un hack para nuestro querido Internet Explorer, que tan bien se porta y tan respetuoso es con las normas CSS, para ello, añadiremos en nuestra etiqueta de botón un pequeñísimo script:
<a href="#" class="button" onclick="this.blur();"><span>Texto del boton</span></ a>
Para poder utilizar este botón para el envío de formularios, tendremos que añadir un evento de click que haga submit del formulario mediante JavaScript (onclick=”this.form.submit”)
0