Botones simples con CSS

Estos botones son sencillos de armar y el CSS se puede descargar desde la página del autor, usarlos total o parcialmente o modificarse a gusto.

En principio, funcionarían en cualquier navegador incluyendo versiones viejas de Internet Explorer aunque faltaría agregarles las propiedades para Opera y sería mejor eliminar aquellas que ya no son necesarias tales como -webkit-border-radius, -moz-border-radius, -webkit-box-shadow o -moz-box-shadow

Además, sería conveniente modificar la sintaxis de las gradientes utilizadas en Chrome para que sean iguales al resto de los navegadores; por ejemplo:

-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0));

se transformaría en esto:

-webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);

El HTML es genérico, se scribe siempre igual:

<a class="button white" href="#">ejemplo</a>

ejemploejemploejemploejemploejemploejemploejemploejemploejemploejemplo

Este es el CSS de uno de los botones:

.button { /* clase general */
  border: 1px solid #dedede;
  border-radius: 3px;
  color: #555;
  display: inline-block;
  font: bold 12px/12px HelveticaNeue, Arial;
  padding: 8px 11px;
  text-decoration: none;
}

.button.white{
  background: #f5f5f5;
  border-color: #dedede #d8d8d8 #d3d3d3;
  box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
  color: #555;
  text-shadow: 0 1px 0 #fff;
  background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: -webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: o-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: ms-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: linear-gradient(top,  #f9f9f9, #f0f0f0);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0');
}

.button.white:hover{
    background: #f4f4f4;
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    text-shadow: 0 1px 0 #fdfdfd;
    background: -moz-linear-gradient(top,  #efefef, #f8f8f8);
    background: -webkit-linear-gradient(top,  #efefef, #f8f8f8);
    background: -o-linear-gradient(top,  #efefef, #f8f8f8);
    background: -ms-linear-gradient(top,  #efefef, #f8f8f8);
    background: linear-gradient(top,  #efefef, #f8f8f8);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8');
}

Sí, ya sé, tener que escribir varias propiedades para los distintos navgadores es realmente molesto pero, es lo que hay.

REFERENCIAS:lab.tommasoraspo.com