Sombras y bordes con CSS3

Sin duda una de las mejores cosas que hay ahora es CSS3, junto con HTML5.
Antes, cuando un diseñador web quería agregar un botón en una página que tuviera un aspecto agradable, como tener un degradado o sombras cuando se posicionaba el mouse sobre él, se debía de hacer uso de ciertos "trucos" como insertar imágenes en las esquinas para que tuviera bordes redondeados o que el fondo completo del botón sea una imagen para poder tener un degradado, o en su defecto usar un botón hecho en flash.

Por experiencia, todo esto era algo engorroso, ya que se debía de hacer muchas cosas a la vez y se sobrecargaba el archivo de código HTML, porque se tenía que recurrir a tablas, imágenes, eventos de los objetos, javascript para los "hovers", plugins, etc.... Pero ahora, existe CSS3, que aun no es completamente estándar pero va avanzando, que nos permite dar degradados distintos a nuestras etiquetas, agregarles sombras, insertarle elementos antes o después, bordes redondeados, sombras, pseudoclases en css (esto ya estaba desde antes pero se han agregado nuevas), animaciones, podemos jugar con los bordes y hacer triángulos, flechas, una infinidad de cosas que podemos lograr ahora y que han venido a darle un poco de flexibilidad a esa web "cuadrada" a la que estabamos acostumbrados.

En un ejemplo se pueden ver algunas de estas cosas, principalmente los bordes redondeados y las sombras, queda algo así como el siguiente:

Este botón tiene tres características "nuevas": el degradado gris, los bordes redondeados y la sombra en el hover.
Las tres cosas existían desde hace algún rato en los navegadores basados en webkit, que si no me fallan mis conocimientos son Safari, Chrome, Chromium, Safari mobile, el navegador de Android, y probablemente otros de los que no estoy completamente familiarizado. También estuvieron disponible en Firefox y Firefox Mobile para Android y he leído un poco que también en Opera Desktop.
Bueno, desde hace mucho estaban en todos los navegadores, con su forma peculiar de declarar, MENOS en el IE < 9.

Lo que se puede usar para poner un degradado es los siguiente:

background: -webkit-linear-gradient(top, #FFF, #BBB);

Que es exactamente el que se usa en el estilo del botón, pero este funciona para navegadores basados en webkit, para hacerlo un poco más "multinavegador" debemos piner las siguientes lineas

background: #FFF; 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#BBB));
background: -webkit-linear-gradient(top, #FFF, #BBB);
background: -moz-linear-gradient(top, #FFF, #BBB);
background: -ms-linear-gradient(top, #FFF, #BBB);
background: -o-linear-gradient(top, #FFF, #BBB);

En este caso, el que entienda el navegador es el que se va a aplicar.

Para el borde redondeado es un poco más corto y sencillo, de la siguiente forma:

-webkit-border-radius: 5px 5px; 
-moz-border-radius: 5px 5px; 
border-radius: 5px 5px;

Este es para webkit, mozilla y el estándar. Los pixeles son para el tamaño del radio que tendrá la esquina, se puede pasar un valor para que lo tome en todas las esquinas, dos valores para arriba y abajo, y los cuatro valores de cada esquina.

Y por último para la sombras es el siguiente código:

-webkit-box-shadow: #666 0px 0px 5px; 
-moz-box-shadow: #666 0px 0px 5px; 
box-shadow: #666 0px 0px 5px;

Este recibe el color de la sombra, la posición en X y la posición en Y con respecto al objeto que lo muestra y la longitud de la sombra.

Teniendo todas estas opciones, lo que hace falta es imaginación y creatividad para utilizarlo, y ganas de experimentar con cosas nuevas también, creo que eso es más importante.

El código completo esta en el siguiente enlace:
Ejemplo de botón