Crear un botón como los de Google con CSS3

La semana pasada Google dio muchas noticias, pero entre las más importantes están la nueva red social, y el cambio de interfaz en sus servicios, dejando atrás el color azul y blanco para elegir un color rojo, negro y blanco, dejando una interfaz mucho más estilizada.

Bueno, en este tutorial vamos a ver cómo crear un botón como los de Google con CSS3, para que puedan tener uno como el de la imagen en su blog o sitio web, dejando que cambien el color al que ustedes quieran.

PREPARACIÓN

Entonces, lo primero que vamos a necesitar en estos casos siempre va a hacer el esquema de nuestro botón, empezando con HTML. Para este caso basta con crear un link con una clase que se va a llamar botón:

CSS

Ahora, le tenemos que dar un toque para personalizarlo un poco más, para darle el aspecto del botón de Google. Antes de eso tenemos que ver que vamos a hacer un estilo, y uno de ellos tendrá :hover, para activar los efectos una vez que el cursor esté sobre el botón. Entonces, vamos con la primera parte:

Este primer estilo tiene lo esencial para darle la forma al botón, incluyendo la fuente, tamaño, bordes, etc., si quieren cambiarlo pueden cambiar el color de texto y el fondo, así como el borde, sólo recuerden que debe ser del mismo color que el fondo.

En el segundo estilo, derivado del primero, se va a activar cuando el usuario ponga el mouse en el botón, por lo que si ya tenemos los efectos pasados actuando en el botón, ya nada más basta configurar lo que va a cambiar, que en este caso será agregarle una sombra muy tenue, la posibilidad de cambiarle el color de texto y agregarle un degradado, para darle más color. Los colores que aparecen son primero el más claro, y luego el oscuro, que resulta ser igual que el del fondo normal, para que no ocupemos tantos colores.

Si colocaron el código cómo arriba, les debió resultar algo así:

Y al colocar el mouse:

Si tuviste algún problema con el tutorial, no dudes en dejarlo en los comentarios, para que te ayude