Crear bonitos botones mediante CSS

Leyendo Xyberneticos me encuentro este util tip para nuestros proyectos web. Mediante Css podemos crear bonitos botones para nuestra web mediante la utilizacion de un pack de iconos. El codigo HTML seria tan simple como:

<a href=«#» class=«button»>
<span class=«add«>Add to your bookmark</span>
</a>

Donde class=»add» hace referencia a la siguiente clase CSS:

.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

El codigo CSS para el button seria:

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

Con este simple codigo, ya podriamos implementar el boton con la imagen «add», crear el resto de botones seria similar. Mejor, descargais el ejemplo en los enlaces siguientes:

Enlace | woork
Enlace | Pack de iconos
Enlace | Codigo de ejemplo