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’