CSS: Botones redondeados con brillo

Sabiendo lo que os expliqué ligeramente en la primera entrada de CSS, hoy voy a dedicarme a las propiedades CSS border-radius, box-shadow y linear-gradient. Con su apoyo, al final haré un botón que parezca azul cristalino y que se ilumine cuando pongamos el cursor encima,  todo ello sin utilizar ninguna imagen y con sólo un estilo.

Pero antes: ¿qué nos ofrece cada una de estas propiedades?

• border-radius: Redondeo de las esquinas de un elemento (incluido imágenes)
• box-shadow: Aplicar un efecto de sombra a un elemento
• linear-gradient: Aplicar un degradado de colores de fondo

En los enlaces de la W3C que pongo arriba se explica todo en más detalle. Aquí voy a poner lo que veo más útil y unas demostraciones de lo que se puede conseguir con cada una de ellas. En cada muestra podréis ver los efectos que produce el código que esta dentro del elemento estilizado.

Debemos tener en cuenta que todavía no son un estándar y que cada navegador puede tener una implementación distinta hasta que se asiente cada una de las propiedades (yo compruebo los efectos en Chrome y Firefox que son los que más me visitan XD).

border-radius:

El valor de esta propiedad viene dada por dos valores, el primero marca el radio horizontal de la esquina y el segundo el radio vertical, ya que podemos hacer que sean distintos. De esta forma tenemos:

Elemento con las cuatro esquinas iguales y redondas. Sólo hace falta un valor:

border-width: 2; border-radius: 1em;

NOTA: si os fijáis el tamaño del radio esta medido en 'em', esta es una medida relativa al tipo de letra que se esta usando y que puede asemejarse a una 'm' minúscula. De esta forma el radio guardará una proporción acorde al contenido.

Elemento con esquinas distintas dos a dos. Hacen falta dos valores:

border-width: 2; border-radius: 1em 0.5em;

Elemento con las cuatro esquinas distintas. Un par valor por esquina (además añadí distintos grosores):

border-width: 2px 6px;
border-top-left-radius: 1em 0.5em;
border-top-right-radius: 0.2em 0.2em;
border-bottom-right-radius: 2em 2em;

Con todo esto es posible darle vueltas a la imaginación para que quede todo mas curioso.

box-shadow:

El valor de esta propiedad es una lista de sombras separadas por comas, cada una especificada por 2-4 valores, un color opcional y una clave "interior":

1. Desplazamiento horizontal de la sombra respecto al elemento.
2. Desplazamiento vertical de la sombra respecto al elemento.
3. Difuminado de la sombra.
4. Extensión de la sombra (cuánto más grande/pequeña es respecto el elemento).
5. Color de la sombra. Opcional (si no se indica nada se hereda la propiedad color del elemento).
6. Indica si la sombra es interior. Opcional. Se pondría la palabra clave 'inset'.

Con esto ya podemos empezar a ver que obtenemos:

Sombra exterior del mismo tamaño que el elemento desplazada 10px a la derecha y abajo:

box-shadow: 10px 10px rgba(0,0,0,0.4);

Sombra interior del mismo tamaño que el elemento desplazada la mitad:

box-shadow: 5px 5px rgba(0,0,0,0.4) inset;

Sombra interior y exterior, de distintos colores, con distintos desplazamientos y con la sombra exterior 3px mayor que el elemento:

box-shadow: 8px 4px 0 3px rgba(0,0,200,0.4), 4px 8px rgba(200,0,0,0.4) inset;

Sombra centrada en el elemento 3px más grande y con 4px de difuminado:

box-shadow: 0 0 4px 3px rgba(0,0,0,0.4);

Bien ya nos vamos acercando a lo que queremos.

linear-gradient:

Esta propiedad necesita que se le indiquen los colores que vamos a usar, el ángulo de pintado, dónde obtenemos cada color, el punto de partida... es bastante complejo de hacer a mano para algunos efectos más complicados.
Gracias a Dios, tenemos un enlace con una aplicación web que nos proporciona una interfaz parecida a la de Adobe Photoshop para crear los gradientes y nos genera el código preparado para ser compatible con todos los navegadores.
Aquí dejo el enlace a esta aplicación: Ultimate CSS Gradient Generator.

Así podemos conseguir fácilmente efectos como estos:

background: -moz-linear-gradient(-45deg, rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%); background: -ms-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: -o-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(15%,rgba(30,87,153,0.8)), color-stop(19%,rgba(30,87,153,1)), color-stop(20%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(80%,rgba(30,87,153,1)), color-stop(81%,rgba(30,87,153,1)), color-stop(85%,rgba(30,87,153,0.8)), color-stop(100%,rgba(30,87,153,0))); background: -webkit-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: linear-gradient(135deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=1 ); text-align: center;

Todo el texto interior no es que me haya vuelto loco, es todo el código que hace falta para que funcione... así que yo prefiero que me lo haga una aplicación.

Muy bien... ¿y dónde está el botoncito?

Para terminar voy a sacarle partido a todo lo que hemos visto y a crear sólo con CSS un botón con esquinas redondeadas y textura cristal que se ilumine cuando estemos encima de él sin usar ninguna imagen. Para ello haré lo siguiente:

1. Creare un estilo de clase "botonRapido" con:
• Bordes redondeados
• Un gradiente que me dé la textura cristal apagado
• Una sombra centrada en el botón
• Un color para la fuente del texto que no sea blanco puro
2. Modificaré el estilo anterior cuando suceda el evento "hover" (pasar el ratón por encima) para que:
• El gradiente sea más luminoso
• La sombra más clara
• El color de la fuente blanco puro.

Implementando todo eso ya tenemos nuestro botón. Probarlo.

Si queréis saber como lo hice exactamente, os dejo el enlace a los archivos que he creado para que podáis verlo tranquilamente y hacer pruebas en local con vuestro navegador.

Si tenéis algún problema podéis comentármelo. Un saludo.