Decorando los enlaces

Los enlaces (links) son elementos inline, es decir, miden tanto como su contenido y no generan un salto de línea automático, por eso es que podemos agregarlos en un texto sin que la página sufra colapsos:

blablabla blablabla <a href="unaURL">EL ENLACE</a> blablabla blablabla blablabla

Por lo general, el área donde podemos hacer click está definida por un color diferente y el ancho y el alto se corresponden con el ancho y alto del mismo texto sin embargo, muchas veces, nos vemos en la necesidad (o se nos da la gana) de crear enlaces un poco más "sofisticados", agregarles bordes o fondos pero, si lo hacemos, el resultado puede no parecer lo que esperábamos:

blablabla blablabla EL ENLACE blablabla blablabla blablabla

Mucho peor si se trata de alguna clase de lista con algún estilo:

<a style="background-color: #334455; border: 1px solid #556677;" href="#">ENLACE</a>

Daría como resultado algo así:

ENLACE A ALGUNA PARTE
ENLACE A OTRA PARTE
ENLACE A NINGUNA PARTE

En CSS, la propiedad que define si un elemento es de tipo inline o no es display y podemos modificarla a nuestro antojo así que nada impide que convirtamos los enlaces en el tipo contrario (block):

<a style="display: block; border: 1px solid #556677; background-color: #334455;" href="#">ENLACE</a>

El resultado sería algo así:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Como se ve, el enlace ocupa todo el ancho del contenedor, un poco exagerado pero ahora podemos agregarle más propiedades y controlar su diseño. Claro que para eso, lo mejor es crear un clase y aplicarla. Por ejemplo:

a.enlaceDemo {
  background-color: #334455;
  border: 1px solid #556677;
  color: #AABBCC !important;
  display: block;
  height: 22px;
  line-height: 22px;
  margin: 5px;
  padding: 0 10px;
  width: 200px;
}

Y, en lugar de agregar el estilo en cada uno de ellos, indicamos la clase:

<a class="enlaceDemo" href="#">ENLACE</a>

La lista estará más ordenada:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
En general, como el color de los enlaces está predefinido, si queremos cambiarlos en algún modelo, es necesario agregarle la palabra !important para que el cambio surta efecto.

Como es una lista, usamos width y height para darles a todos el mismo tamaño. Con padding establecemos la distancia que habrá entre el contenido (el texto) y los bordes; con margin, la distancia que habrá entre un bloque (los enlaces) y otro. Por último, para que el texto quede centrado verticalmente, le damos a la propiedad line-height el mismo valor que a la propiedad height.

Por supuesto, podemos agregar cualquier otra propiedad, incluyendo imágenes de fondo:

  background: #334455 url(laImagen) no-repeat 10px 50%;
  padding: 0 10px  0 30px;

Colocamos la imagen en el fondo, la posicionamos algo hacia la izquierda (10px) verticalmente centrada (50%) y aumentamos el padding izquierdo para que el texto no se superponga:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Podemos agregarle un efecto mouseover añadiendo una nueva definición donde cambiamos algunas propiedades por otras y usamos text-decoration: none para que no se subrayen los textos:

a.enlaceDemo:hover {
  background: #000000 url(laImagen) no-repeat 10px 50%;
  border: 1px solid #333333;
  color: #FFFFFF !important;
  text-decoration: none;
}

El último ejemplo:

ENLACE A ALGUNA PARTEENLACE A OTRA PARTEENLACE A NINGUNA PARTE
Ahora, simplemente, basta ponerse ...

A JUGAR