Hace unos dias les hable de una técnica para estilizaren botones CSS. Hoy trabajando un diseño, necesita un botón con ese estilo pero mas simple, entonces recordé una técnica que por medio de CSS3 y sin la necesidad de javascript podemos crear botones simples y minimalistas que se verán uniformemente en todos los navegadores (por lo menos en aquellos que soporten algunas reglas CSS3)

A la técnica a la que hago referencia es tomada de Zurb, la cual funciona para los anchor a o button.

Basicamente se trata de combinar algunas de las nuevas reglas CSS3 como text-shadow, box-shadow y border-radius junto con el uso correcto de RGBa

Comencemos

Nuestro markup

<button class="large button blue" type="submit">Super Cool Button</button>

Como lo menciones anteriormente funciona tanto para los anchor a o button

CSS Básico

Este seria el esqueleto de nuestro botón de esta class se van a apoyar luego otras para dar el efecto final.

.button
{
	background: #222 url(images/overlay-button.png) repeat-x 0 0;/* Pequeño PNG que funciona a modo de gradient */
	border-bottom: 1px solid rgba(0,0,0,0.25);/* Borde negro con transparencia en 25%*/
	color: #fff !important;
	cursor: pointer;
	display: inline-block;/* Alinear corectamente el boton*/
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;/* Borde para Firefox */
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);/* Sombra negra en 25% para Firefox*/
	overflow: visible;/* contedido sobrante visible*/
	padding: 5px 15px 6px;
	position: relative;
	text-decoration: none;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);/* Sombra negra en 25% para el texto */
	webkit-border-radius: 5px;/* Borde para Webkit*/
	webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);/* Sombra negra en 25% para Webkit*/
	width: auto;/* Importante para que el boton se ajuste a nuestro texto */
}

Estados del boton

Para este caso solo vamos a personalizar el hover y el active para dar el efecto al presionar el botón y posicionar el cursor sobre él.

.button:hover
{
	background-color: #111;
	color: #fff;
}
.button:active
{
	top: 1px;
}

Tamaños del boton

Tenemos tres tamaños para “jugar” con nuestro botón. El medium, que seria el aplicado por defecto, el small un poco mas reducido en su tamaño; y el large un poco mas grande, obviamente gracias al padding que le aplicamos.

.small.button
{
	font-size: 11px;
}
.large.button
{
	font-size: 14px;
	padding: 8px 19px 9px;
}

Estilo del boton

Dejo como ejemplo un botón de color azul-claro. Podes ajustar aquí el color del botón a tus necesidades

.blue.button
{
	background-color: #2daebf;
}
.blue.button:hover
{
	background-color: #007d9a;
}

Nuestro boton final

Hemos terminado con nuestra hoja de estilo por lo cual procedemos al markup en HTML:

<button class="large button blue" type="submit">Super Cool Button</button>

Y se vería de la siguiente forma:

Conclusiones

Como lo podes observar el botón es muy simple de implementar, y lograras un resultado casi uniforme en todos los navegadores. Una de las contras que tiene esta técnica es que ciertas propiedades de CSS3 no son 100% soportadas por todos los navegadores, pero el resultado sera ligeramente similar. También te recomiendo que leas en Zurb un poco mas sobre esta técnica y experimentes para poder lograr un botón que adapte a tus exigencias.