Professional Documents
Culture Documents
Odomera
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.
Clic en mi Descargar!
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í:
Ahora, lo que haremos será hacer un buen diseño para nuestro botón en su versión estado
normal y presionado.
Algo como esto:
Vamos a incluir los dos estados en una sola imagen. Para cambiar entre el estado normal y
presionado, simplemente le cambiamos la imagen de fondo verticalmente, dejando al
descubierto el estado de botón alternativo.
Este enfoque basado en CSS nos permite realizar el cambio sin utilizar ningún truco con
javascript.
Vamos a unir estos dos y aplicar la técnica de sliding doors. La parte de la imagen que tendrá
en cuenta el texto del botón se establece un unos razonables 300px. La altura se establecerá
en 24px.
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.
overflow: hidden;
width: 100%;
a.boton-gris {
background: transparent
url(http://lh6.ggpht.com/_WN9UFHex6W4/SgisIuhH2gI/AAAAAAAAAmU/wnDJxZNQ
_e8/bg_button_a.gif) no-repeat scroll top right;
color: #444;
display: block;
float: left;
height: 24px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none!important;
a.boton-gris span {
background: transparent
url(http://lh6.ggpht.com/_WN9UFHex6W4/SgisIoNbfSI/AAAAAAAAAmY/ykehw8hD
zFc/bg_button_span.gif) no-repeat;
display: block;
line-height: 14px;
outline: none;
text-decoration: none!important;
a.boton-gris:active {
text-decoration: none!important;
a.boton-gris:active span {
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.
Referencias: Alex Griffioen