P. 1
Crear Botones CSS

Crear Botones CSS

|Views: 212|Likes:
Publicado porCarlos Barrios

More info:

Published by: Carlos Barrios on May 07, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

07/31/2013

pdf

text

original

OCT2009

24

Odomera

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.
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í:

<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. Algo como esto:

Estado Normal

Estado Presionado

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

font: normal 12px arial. div) para botones flotantes */ overflow: hidden. margin-right: 6px.ggpht.clear { /* contenedor genérico (ej. outline: none. . . float: left. padding-right: 18px. color: #444. } a. } a. width: 100%.com/_WN9UFHex6W4/SgisIoNbfSI/AAAAAAAAAmY/ykehw8hD zFc/bg_button_span.gif) no -repeat scroll top right. } a. text-decoration: none!important. line-height: 14px. padding: 5px 0 5px 18px.boton-gris span { background: transparent url(http://lh6. display: block.boton-gris { background: transparent url(http://lh6.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. sans -serif.gif) no -repeat. height: 24px. text-decoration: none!important.boton-gris:active { background -position: bottom right.ggpht. display: block.com/_WN9UFHex6W4/SgisIuhH2gI/AAAAAAAAAmU/wnDJxZNQ _e8/bg_button_a.

las imágenes están alojadas en blogger. } Eso es todo. a probar! Botón de prueba Referencias: Alex Griffioen Compartir esta entrada: Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con FacebookCompartir con Google Buzz Etiquetas: CSS. Muy bien. por lo que si querés usar el código así como está no hay problema. } a. aunque es muy mal visto hacer hotlinking. padding: 6px 0 4px 18px. /* bajar el texto 1px al apretar el boton */ outline: none. Trucos.boton-gris:active span { background -position: bottom left.color: #000. mejor descargarlas y realojarlas a nuestro propio servidor. text-decoration: none!important. outline: none. Internet. ahora. Tutorial . /* ocultar outline punteado en Firefox */ text-decoration: none!important.

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->