Crear Boton CSS
Hoy vamos a aprender a crear botones con hojas de estilos CSS a partir de un vínculo desde cero para decorar una WEB. Recomiendo leer todo a pie de la letra, ya que es un Tutorial algo largo.
¡Empezemos!
¡Empezemos!
Como todos sabemos el código HTML de un vínculo sería algo así:
Sencillo ¿no?, pero el resultado visual sería este:
Aburrido... ¿verdad? . Entonces vamos a darle vida con CSS
. Nos fijamos primero en la etiqueta del código HTML que queremos estilizar :
<a href="http://DanGrecks.es.tl">Ir a DanGrecks</a>
Como vamos a trabajar sobre un vínculo entonces sería la etiqueta a.
¿Hasta aquí todo bien?, perfecto : Se escribe el nombre de la etiqueta y luego se abre una llave, dentro de esta irán todas las propiedades.
Color (color).
Comencemos por algo fácil y le daremos un color a la fuente:
Se escribe primero la propiedad seguido por dos puntos, luego los parámetros separados por espacios y finalmente cerramos con un punto y coma.
En el caso de los colores se utiliza el código hexadecimal que consiste en 6 dígitos desde 0 (más oscuro) a F (más claro). En donde los dos primeros dígitos definen el color rojo los dos del medio al verde, los dos últimos al azul y siempre se comienza escribiendo el símbolo de numeral obteniendo así una mezcla de los tres colores primarios:
#FF0000
Ahora en nuestra página, los vínculos se Visualizaran así:
Border (borde).
Mmm... no cambió mucho
. Pues vamos a agregarle más onda en nuestra hoja de estilo . Veamos... ¿qué tal un borde? La propiedad border sirve para esto, dentro de los parámetros se coloca el ancho del borde en este caso 2px (dos píxeles), dejando un espacio el color #0000FF y el estilo del borde solid (sólido).
En el caso de los estilos de borde pueden ser:
none (ninguno)
dotted (punteado)
dashed (discontinuo)
solid (sólido)
double
groove (sombreado)
ridge (sombreado inverso)
inset (relieve)
outset (relieve inverso)
Ahora nuestro Boton se visualizara así:
Padding (relleno).
No se ustedes, pero a mí no me convence
. Sería mejor si el borde estuviese más separado de las letras.
¡Ya sé!, vamos a usar la propiedad padding (relleno):
¡Ya sé!, vamos a usar la propiedad padding (relleno):
La propiedad padding se usa para, claro, dar más relleno al contenido. En este caso le dimos un relleno de 5px (5 píxeles) arriba, derecha, izquierda y abajo. Veamos como queda:
Mucho mejor, pero vendría bien darle un poco más de relleno a los costados modificando la propiedad padding:
Un momento ¿¡pero qué hicimos acá!?. Muy sencillo simplemente agregamos al padding
Primer valor (relleno superior)
Segundo valor (relleno derecho)
Tercer valor (relleno inferior)
Cuarto valor (relleno izquierdo)
Dando como resultado:
Background-color (color de fondo).
Ahora me apetece un color de fondo . Esto lo haremos con la propiedad background-color:
Font-family (familia de fuente).
No lo se... creo que deberíamos cambiarle el tipo de fuente ya que Arial es muy común en estos días ¿no? :
La propiedad font-family define el nombre de la fuente de la letra, pero, ¿porqué pusimos 3 fuentes diferentes separadas por comas?
. Porque si la PC del visitante no tiene instalada la primer fuente buscará la segunda y si esta tampoco está instalada probará con la siguiente y así sucesivamente. 
Font-size (tamaño de fuente).
¡O por Dios! quedó monstruosamente grande, mejor si le cambiamos el tamaño con la propiedad font-size a unos...12 píxeles:
Font-weight (peso de fuente).
Ahora quedó demasiado pequeña XD. Vamos a usar font-weight (peso de fuente) para ponerla en bold (negrita):
Text-decoration (decoración de texto).
Perfecto . Pero hay algo que me perturba, al igual que el color azul, el subrayado es algo que el navegador lo agrega de forma predeterminada ¿Qué tal si lo quitamos?:
La propiedad text-decoration nos permite decorar el texto:
none (sin nada)
underline (con subrayado)
overline (con línea superior)
line-through (tachado)
blink (parpadeante).
Combinando 2 o más de los anteriores
none (sin nada)
underline (con subrayado)
overline (con línea superior)
line-through (tachado)
blink (parpadeante).
Combinando 2 o más de los anteriores
Border-radius (radio del borde).
¿No les parece demasiado cuadrado este botón?, sería un poco más agradable a la vista si pudiésemos poner un borde más redondeado. Para esto nos será útil la propiedad border-radius:
¡¡¡Wow !!! Quedó muy estético ¿verdad?. Cuánto más píxeles le indiquemos mayor será la curvatura obtenida.
Ahora la mala noticia y la razón por la cuál muchos odiamos a Internet Explorer : Es porque este navegador no soporta esta propiedad sino hasta la versión 9, mientras que otros navegadores como Firefox ya la han aplicado.
Class (clase).
Si queremos tener un botón con la etiqueta a pero que no afecte a a todos los vínculos podemos usar la opción class que sirve para dar un nombre único al estilo:
Como podemos ver, el nombre del class se ubica después de la etiqueta separado por un punto. Pero ahora el código HTML:
<a href="http://DanGrecks.es.tl">Ir a DanGrecks</a>
volverá a representar lo mismo que cuando empezamos:
Para que vuelva a tener el aspecto del botón que hemos estado programando necesitamos definirle el class, ya que ahora se llama boton. Entonces agregamos lo siguiente:
<a href="http://DanGrecks.es.tl" class="boton">Ir a DanGrecks</a>
Ahora podemos decidir cuáles de los vínculos tendrá forma de botón y cuáles no .
Estados.
Para que un botón sea un botón ¿no tendría que tener un efecto al pulsar?. Los estados se inventaron justamente para ello y pueden ser los siguientes:
link (cuando el vínculo no ha sido visitado)
hover (cuando el puntero pasa por encima)
active (cuando el puntero hace clic sobre él)
focus (cuando el tabulador está activo en él)
visited (cuando el vínculo ya ha sido visitado)
En nuestra hoja de estilos:
Vemos en el código anterior que cada estado debe definirse individualmente con su propia llave. Y para definir el estadocon el que estamos trabajando se ubica el mismo después de la clase separado por dos puntos.
Font-style (estilo de fuente).
Pondremos en práctica lo anterior dándole un estilo cursiva al texto cuando el puntero pasa sobre el botón:
La propiedad font-style es usado para definir esto y puede tener como valores los siguientes:
normal (normal)
italic (cursiva)
oblique (oblicua)
Ahora cuando nos situemos sobre el botón, este se vería así:
Box-shadow (sombra).
La propiedad box-shadow, al igual que border-radius no se visualizará en algunos navegadores como ser el "bendito"Internet Explorer, pero nos da un hermoso efecto de sombreado. Vamos a ponerlo dentro del estado hover, a ver que tal
: Como podrán notar también se define con 4 valores en píxeles y el color separados por espacios:
Primer valor (ubicación horizontal de la sombra)
Segundo valor (ubicación vertical de la sombra)
Tercer valor (tamaño del degradado de la sombra)
Cuarto valor (tamaño de la sombra)
Dando como resultado... :
Sobrescribir parámetros.
Seguramente se habrán dado cuenta de que no es necesario volver a escribir todas las propiedades para cada estado, no obstante se pueden modificar en cualquiera de ellos sobrescribiendo los parámetros. Ahora vamos a hacer esto con el estado active:
En este caso yo invertí los colores de fuente y fondo, agrandé el degradado de la sombra 5 píxeles más, sobrescribiendo los valores anteriores y quedándonos así un Botón Presionado:
Evolución de nuestro botón.
¿Vieron que fácil es programar en CSS? Es solamente cuestión de imaginación ahora que ya sabes la sintaxis.
