Crear botones con CSS
Muchas veces nos vemos limitados con el diseño de los botones standards del HTML los cuales varian dependiendo del Sistema Operativo que el usuario corra, pero gracias a esta técnica mediante CSS ahora todos los visitantes van a ver el mismo botón el cual es 100% adaptable al formato de tu web.
Lo primero que tenemos que hacer es definir un estilo, dentro de los tags <headers> o añadirlo a tu hoja de estilos, dependiendo como hayas creado el sitio.
CSS
span.bouton { background-color: #eee; border-left: 1px solid white; border-top: 1px solid white; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; font-family: sans-serif; font-size: smaller; cursor: pointer; /* me gusta que tenga la manito */ cursor: hand; /* FUCK IE6 */ color: #555 } span.bouton:active { border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid white; border-bottom: 1px solid white; padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; }
HTML
<span class="bouton" onClick="javascript: window.location='http://dotblog.com.ar'">Esto es un boton</span>
Acá podés ver un sencillo ejemplo de lo que se logra con ese código CSS.
Para adaptarlo a tu sitio tenés que cambiar el color del fondo, los bordes y todo lo que te guste
