Atractivos botones con CSS [Tutorial]

En este pequeño tutorial voy a mostrarte cómo hacer botones dinámicos bastante atractivos con un efecto de "presionado" de una manera muy fácil.

Para eso utilizaremos una técnica llamada "sliding doors" o "puerta corrediza" en la cual una imagen de fondo se expande con el tamaño del texto del botón, dos imágenes complementarias crean la ilusión de una sola imagen que se estira. Estos son un par de ejemplos:

Nuestro botón será una etiqueta <a> con otra etiqueta <span> anidada, cada uno con una parte diferente de imagen de fondo, esto en código html sería algo así:

<a class="boton-gris" href="#"><span>Clic en mi</span></a>

Nada del otro mundo, verdad?

Ahora, lo que haremos será hacer un buen diseño para nuestro botón en su versión estado normal y presionado.

Estado Normal	Estado Presionado

SPAN	A

Para finalizar necesitaremos un poquito de CSS para que todo esto funcione. Para eso agregar esto que viene a continuación justo antes de ]]></b:skin> en donde están localizados los códigos CSS en la plantilla de Blogger.

.clear { /* contenedor genérico (ej. div) para botones flotantes */    overflow: hidden;    
width: 100%;
}

a.boton-gris {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-b9QAW6mXZwiwr1ryJOiMs1cuAO2Iw-q8J5c85scSA1nl7FIEX8zmEMHCnN_lwuBYagQu1tybJERFcruf3Tgm1ZpJ5OWsgLxI_0gZANiiWHxffQBke2lWPc45h4LFOU6GZMveLdPdIr_/) 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; 
text-decoration: none!important; 
}

a.boton-gris span {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic191Lxc2XgEImB0WAN8oLmB2YylM87C0abBtW7sigCYsrS9YxNbJFYDfeAMqdGrDAffY7KW0Jy9BH9hftjmoWO1ccUq6_Tl3JqV32Ci2R8Be-IAFEfLrAE0mUjNdUUVwzuiqYFVgWD6kH/) no-repeat;display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
outline: none;
text-decoration: none!important; 
} 

a.boton-gris:active {
background-position: bottom right;
color: #000;
outline: none; /* ocultar outline punteado en Firefox */text-decoration: none!important; 
}

a.boton-gris:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* bajar el texto 1px al apretar el boton */
outline: none;
text-decoration: none!important; 
} 

Eso es todo, las imágenes están alojadas en blogger, por lo que si querés usar el código así como está no hay problema, aunque es muy mal visto hacer hotlinking, mejor descargarlas y realojarlas a nuestro propio servidor.

Muy bien, ahora, a probar!
Botón de prueba

Referencias: Alex Griffioen

¿Te resultó útil? Ver otro post al azar (recomendado)

O usa los siguientes botones para compartir: