Usando la etiqueta de enlace como botón

Al usar una etiqueta para crear un enlace en HTML y hacerlo funcionar como un botón, serás capaz de observar que el área donde el usuario puede cliquear coincide con la altura y ancho del texto del enlace. Esto se debe a que esta etiqueta se visualiza en línea de forma predeterminada, pero es posible modificarla para darle un diseño más atractivo de cara al usuario cambiando el tipo de visualización, en el código CSS del enlace, al tipo bloque:

a {display: block}

A menos que especifiques un ancho específico con la propiedad width, la transformación del enlace en un elemento de tipo bloque hace que éste abarque todo el ancho del elemento en el que se encuentra contenido. Esta modificación lo hace idóneo para los enlaces ubicados en una barra lateral o para los enlaces de un menú desplegable.

Para terminar, como la conversión que hemos hecho al enlace sólo afecta a su comportamiento y su ancho, termina añadiendo un buen relleno con la propiedad padding. Haciendo esto consigues que la altura del botón sea más adecuada a su contenido y el elemento respirará, es decir, no dará una sensación claustrofóbica respecto al texto visible en su interior.

Realiza pruebas y combina estas ideas, seguro que te ayudarán a encontrar un estilo propio. Yo te añado aquí abajo una idea para que veas como puedes mejorar fácilmente el aspecto de este elemento.

<html>
    <head>
    </head>
    <body>
        <a href="./">Para pulsar</a>
        <br/><br/>
        <a style="color: white; display: block; padding: 6px; width: 70px;
        border: 1px solid black; box-shadow: 3px 3px 1px #888888;
        text-decoration:none; background-color: #088;" href="./">Para pulsar
        </a>
    </body>
</html>