Creando un botón con CSS3

CSSProgramacion

3 de October, 2011

Probablemente algunos de ustedes aún están indecisos si tomar la decisión de empezar a usar las últimas herramientas en nuestra caja para desarrolladores web, si eres uno de ellos no esperes más, debes empezar de una vez, ya estas están implementadas en la mayoría de los navegadores y recordemos que IE ya no tiene tanto terreno como solía tenerlo hace no mucho.

CSS3 es una de esas herramientas, ya no es necesario usar las miles de imágenes para las esquinas redondas ni el imagen de fondo para el fondo degradado, todo esto lo podemos hacer con unas simples líneas de código, así vemos ventajas como poder editarlos sin tener que estar abriendo photoshop para cambiar las dimensiones de las imágenes o el color del fondo, así como también nos ahorramos mucho tiempo de carga ya que la página tiene que hacer menos pedidos HTTP para descargar las imágenes.

Así que usando ventaja de esta gran herramienta vamos a usarla hoy para construir un botón bastante llamativo que puede ser usado para agregarle un gran elemento de diseño a tu web, así que vamos a empezar.

HTML

Primero que nada vamos a colocar el html

<a href="#">Botón</a>

Estoy siendo bastante redundante aquí sin ponerle ningún id o clase porque es una demostración pero recuerda que si lo vas a usar muchas veces lo mejor es colocarle una clase para que puedas repetirlo sin ningún problema.

Estilos básicos

Vamos a comenzar con el estilo básico del botón, le quitamos el subrayado, colocamos color, tamaño y familia de fuente

<br />
text-decoration: none;<br />
color: #c5feff;<br />
font-size: 18px;<br />
font-family: Helvetica, sans-serif;<br />

Forma

Ahora vamos a darle un poco de forma, colocamos un color de fondo, un borde y algo de acolchado.

<br />
padding: 10px 30px;<br />
background: #45b8e2;<br />
border: 1px solid #0d7298;<br />

Recuerda que  en vez de colocar padding: 10px 30px 10px 30px; puedes colocar simplemente padding: 10px 30px; y automáticamente el código pone 10px arriba y abajo y 30px a ambos lados.

Si has seguido los pasos bien deberías de tener en estos momentos algo parecido a esto:

Creando un botón usando CSS3Ya el botón está creado, ahora usemos algo de la magia de CSS3 para darle estilo de verdad.

Usando CSS3

Vamos a empezar con text-shadow que es para darle sombra al texto

text-shadow: 1px 1px 1px #165688;

El código se lee así (Espero que estés familiarizado con las Coordenadas Cartesianas, porque NO vendrá un tutorial de eso), 1px en el eje de las X, 1px en el eje de las Y, 1px de difuminado y el código del color.

Después agregamos el border-radius que nos sirve para las famosas y tan populares esquinas redondas

border-radius: 10px;

Este es el código oficial, y en estos momentos las últimas versiones de todos los navegadores lo están empezando a implementar, pero aun casi todo el mundo usa las versiones que usan los prefijos por navegador.

<br />
-webkit-border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-o-border-radius: 10px;<br />
-ms-border-radius: 10px;<br />
-khtml-border-radius: 10px;<br />

Webkit es para los navegadores que usan un motor webkit como Chrome y Safari, moz es para los navegadores Gecko, siendo el más famoso Firefox, khtml para Konqueror, ms para microsoft y o para opera, siempre los coloco todos, nunca está de más.

Y finalmente el gradiente de fondo, ya viste que colocamos el color plano

background: #45b8e2;

Esto se hace para que los navegadores que no soportan CSS3 no vean el fondo sin color y así pueda referirse a el color base.

Para los navegadores que SI lo soportan:

<br />
/* Para Firefox */<br />
background: -moz-linear-gradient(top, #45b8e3, #2aa3d0);<br />
/* Para Safari y Chrome */<br />
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#45b8e3), to(#2aa3d0));<br />

Si siguieron todos los pasos bien deberían tener ahora algo así:

Creando un botón usando CSS3Pero vamos a ir un paso más allá y agregarle algo de estilo extra al botón, con un simple cambio en el gradiente de fondo podemos darle un efecto mucho más sobresaliente por decirlo así

<br />
/* Para Firefox */<br />
background:<br />
	-moz-linear-gradient(<br />
	top,<br />
	#45b8e2,<br />
	#2aa3d0 50%,<br />
	#2194bf 51%,<br />
	#45b8e2<br />
	);<br />
/* Chrome y Safari */<br />
background:<br />
	-webkit-gradient(<br />
	linear,<br />
	left top,<br />
	left bottom,<br />
	color-stop(0, #45b8e2),<br />
	color-stop(.5, #2aa3d0),<br />
	color-stop(.5, #2194bf),<br />
	to(#45b8e2)<br />
	);<br />

Lo coloqué así para que lo vieran mejor, pero pueden usarlo en una sola línea como todos los demás códigos. Por supuesto, tenemos que eliminar el primer código que usamos y luego colocar este, así lograremos este efecto:

Creando un botón usando CSS3Efectos básicos

Finalmente vamos a colocarle un efecto para cuando el cursor el pase por encima al botón con uno de los selectores más usados a:hover y otro cuando lo cliquees usando a:active

<br />
a:hover {<br />
	/* Para los navegadores que no soportan el gradiente */<br />
	background: #75d3f6;<br />
	/* Firefox */<br />
	background:<br />
		-moz-linear-gradient(<br />
		top,<br />
		#75d3f6,<br />
		#4abae4 50%,<br />
		#36acd8 51%,<br />
		#75d3f6<br />
		);<br />
	/* Chrome y Safari */<br />
	background:<br />
		-webkit-gradient(<br />
		linear,<br />
		left top,<br />
		left bottom,<br />
		color-stop(0, #75d3f6),<br />
		color-stop(.5, #4abae4),<br />
		color-stop(.5, #36acd8),<br />
		to(#75d3f6)<br />
		);</p>
<p>	border: 1px solid #3099c1;<br />
}<br />
a:active {<br />
	/* Para los navegadores que no soportan el gradiente */<br />
	background: #45b8e2;<br />
	/* Firefox */<br />
	background:<br />
		-moz-linear-gradient(<br />
		top,<br />
		#45b8e2,<br />
		#2aa3d0 50%,<br />
		#2194bf 51%,<br />
		#45b8e2<br />
		);<br />
	/* Chrome y Safari */<br />
	background:<br />
		-webkit-gradient(<br />
		linear,<br />
		left top,<br />
		left bottom,<br />
		color-stop(0, #45b8e2),<br />
		color-stop(.5, #2aa3d0),<br />
		color-stop(.5, #2194bf),<br />
		to(#45b8e2)<br />
		);<br />
}<br />

Demostración

Listo, puedes ver el demo online aquí se verá bien en cualquier navegador que lo pruebes.

Conclusión

Como dije cuando estábamos empezando, si aún no estás usando CSS3 no sé qué estás esperando, el momento es ahora. Como siempre cualquier duda que tengan estoy más que abierto a las preguntas en los comentarios.

To this end, https://college-homework-help.org/ newspeak removes all synonyms and antonyms