Cómo hacer un botón CSS

Código CSS y HTML para hacer vistosos botones CSS que funcionen como enlaces pero que parezcan botones.
Código a añadir en la hoja de estilos:
a.botonlink
{
cursor: pointer;
display: block;
font-weight: normal !important;
text-decoration: none !important;
padding-left: 60px;
padding-top: 12px;
}
a.botonlinkspan
{
width: 300px; /*ancho de la imagen de fondo */
height: 42px; /*alto de la imagen de fondo */
display: block;
}
Código HTML del botón:

<a href=»#» target=»_blank» class=»botonlink» style=»background: url(images/fondo del boton.jpg’) no-repeat;»><span>Texto del botón</span></a>

El código css incluido dentro del elemento Style del enlace se puede incluir dentro de la clase del css «a.claimlink». Así mismo, si el botón es para un tema de WordPress no olvidéis dos cosas:

– Si el fondo lo añadís en el CSS, el path debería ser images/fondo del boton.jpg

– Si por el contrario lo añadís directamente en el enlace HTML, el path debe estar precedido por la constante que indica la URL de vuestro site de WordPress, por ejemplo: <?=get_bloginfo(‘template_directory’)?>/images/fondo del boton.jpg’

Autor: Janmi

Janmi es un informático entusiasta de la ciencia ficción, el diseño gráfico, el universo de Tolkien, fantasía épica y otras cosas frikis. Apasionado por la tecnología, ya sea desde el punto de visto técnico, domótico, funcional o de diseño.