Botones, con icono, CSS3 listos para usar

Los botones siempre han sido, y mira que son pequeños, uno de los elementos que más horas a consumido a la hora del diseño web.

La elección, la verdad, no era muy extensa. Imagen, clásico de formulario u horas de pelear con el CSS. No era muy extensa hasta ahora.

Con llegada de e implementación de CSS3 está chupado.

mira lo que te digo

Para visualizarlo en tu página tienes dos opciones

<a class="boton">Boton</a>

Opción normalita

<a class="boton anadir">Añadir</a>

Opción con icono (donde la class anadir, es el nombre del icono que deseas mostrar)

El código

.boton
{
display: inline-block;
white-space: nowrap;
background-color: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.boton:hover
{
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}

.boton:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}

.boton:focus
{
outline: 0;
background: #fafafa;
}

.boton:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;
}

/* la imagen en CARACTERES UNICODE UTF (hex) */
.anadir:before{content: "\271A";}
.editar:before{content: "\270E";}
.borrar:before{content: "\2718";}
.salvar:before{content: "\2714";}
.email:before{content: "\2709";}
.megusta:before{content: "\2764";}
.siguiente:before{content: "\279C";}
.estrella:before{content: "\2605";}
.play:before{content: "\25B6";}

El color de los botones es gris, si deseas personalizar un rosa, un pistacho o un purpura tendrás que currartelo un poco, poco y si quieres más variedad de iconos puedes encontrar la referencia hexadecimal UTF-16 (hex) en esta página.

Ep! se me olvidaba. Al ser CSS tanto el texto, como las imágenes es totalmente escalable.

Simplemente cambiando la línea 16 del css

</pre>
<div><code>font</code><code>: </code><code>bold</code> <code>1em</code><code>/</code><code>2em</code> <code>Arial</code><code>, </code><code>Helvetica</code><code>;</code></div>
<div>

fuente:red-team-design.com