Botones gráficos con CSS

En el blog Woork me he encontrado con un tutorial excelente con el que podemos implementar enlaces gráficos usando sólo HTML y CSS y los resultados que obtenemos son espectaculares. También podemos incluir gráficos (iconos) para complementar los botones. Los pasos son muy sencillos para implementar esta técnica, y también pueden descargar un paquete de iconos muy vistosos para colocarlos junto a sus enlaces. El código HTML sería algo así:

<a href="#" class="button">

<span class="add">Add to your bookmark</span>

</a>

Y el código CSS para los estilos sería el siguiente:

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;

}

Enlace | Beautiful CSS buttons with icon set

También te recomendamos:

1. Paquetes de íconos, botones y plantillas gratis Para los que siempre están buscando elementos gráficos para sus sitios, esta es una colección que tiene muchísimas fuentes de...
2. Simkl, guarda tus conversaciones del messenger Algo muy útil por ejemplo en Messenger Plus! es la opción de guardar y encriptar nuestras conversaciones; el problema es...
3. IzzyMenu, crea menús profesionales con CSS IzzyMenu es un sitio espectacular que nos permite crear menús CSS/DHTML con mucha facilidad, obteniendo resultados realmente increíbles y con...
4. Recursos sobre CSS en la Web Para complementar el post anterior, aquí tienen otra lista con sitios llenos de recursos para quienes trabajan con hojas de...
5. Estadísticas Noviembre, 2007 Ya se ha ido otro mes del año, y ahora sólo queda uno. Afortunadamente el blog ha ido aumentando en...