No hay cosa más linda que un botón con CSS. Bueno, probablemente sí, pero de cualquier forma igual son geniales. Varias personas me han preguntado como hacerlo (Personas que quizá no saben usar Google). El truco es muy simple: Se usa una sola imagen y a través de spriters –en el CSS– se generan los 3 estados; normal, sobre y presionado.
Voy a usar de ejemplo un botón ya listo, porque no quiero hacer otro, y espero que no me lo copien
. Este lo uso en una sección de mi web. Se ve así:

Nótese que es una imagen. El primer estado sería el normal, el segundo sobre y el tercero presionado. Simplemente cambia la luminosidad del botón. Fácil. Ahora establecemos el código de la siguiente manera:
/* Botón en estado normal, se especifica el ancho y alto del botón.
se establece background-position indicando top para la primera
imagen. */
a.contactame {
background-image: url(images/contactame.png); /* su imagen :P */
background-position: top;
height: 24px;
width: 75px;
text-indent: 9000px;
display: block;
}
/* Center para la imagen central, estado :hover o sobre. */
a.contactame:hover {
background-position: center;
}
/* Bottom para la última imagen, estado :active o presionado. */
a.contactame:active {
background-position: bottom;
}
Eso en lado del CSS. Para insertarlo en el HTML simplemente especificamos la clase .contactame para el enlace.
<a class="contactame" href="http://www.ejemplo.com/">
<p style="display:none;"><strong>Contactame
</strong> <br />Texto descriptivo.
</p></a>
Y eso es todo. Espero que les sirva
Actualización: Se me olvidó la demo. Pueden verlo en acción aquí.