Botoneras básicas con puro CSS

Muy a menudo suelo recibir consultas del tipo «cómo corregir una botonera», «los botones no encajan», «centrar los botones en el ancho de una botonera horizontal», etcétera. Lo cierto es que cada diseño merece especial atención y, por consecuencia, reglas CSS que podrán solucionar cada problema. Sin embargo, muchas de estas reglas dependen partir desde un punto en común. En este artículo vamos a resolver esos puntos comunes.

La estructura semántica de una botonera

Básicamente una botonera o barra de navegación es un conjunto de hipervínculos. Con HTML5 podemos agupar ese conjunto dentro de una etiqueta nav quedando algo así:

<nav>
  <a href="#">botón 1</a>
  <a href="#">botón 2</a>
  <a href="#">botón 3</a>
  <a href="#">botón 4</a>
</nav>

Sin embargo, y por cuestiones semánticas dentro del nav ordenamos los hipervínculos con una lista desordenada. En sí, una botonera no es más que una lista de enlaces hacia las secciones de un sitio o documento que no se recorre (o navega) con un orden cronológico. Con ésto en mente, el HTML se verá como el siguiente:

<nav>
  <ul>
    <li><a href="#">botón 1</a></li>
    <li><a href="#">botón 2</a></li>
    <li><a href="#">botón 3</a></li>
    <li><a href="#">botón 4</a></li>
  </ul>
</nav>

CSS para botoneras

Ahora viene la parte de diseño. Las etiquetas HTML tienen estilos por defecto propuestos por la W3C y que los navegadores aplican a un documento de manera nativa y puede ocurrir que muchos de tus estilos al combinarse con los predeterminados empiecen a darte resultados no deseados. Por esto veamos una lista de procesos para tener en cuenta:

  1. Eliminar los estilos básicos de la etiqueta ul
  2. Trabajar con los li (en especial si la botonera es horizontal)
  3. Resetear los estilos de los hipervínculos
  4. Diseñar los botones

Los reseteos

Los próximos selectores trabajan para todas las botoneras en general:

nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
nav li {
 float: left /*Opcional si se quiere hacer un menú horizontal*/
}
nav a {
 display: block;
 text-decoration: none;
}

Diseño de los botones

Acá tenemos dos instancias para pensar:

  1. El diseño del botón cuando carga la página
  2. El diseño del botón en el momento en que posamos el mouse encima de él

Para trabajar sobre esto, actuaremos sobre las etiquetas a y la pseudoclase :hover, resultando en:

nav li {
  float:left; /* opcional para hacerla horizontal */
  margin-right: 3px; /* espaciar un poco los botones */
}
nav a {
  display: block;
  text-decoration: none;
  /* a partir de aquí el diseño */
  color: #fff; /* color tipográfico */
  font-family: sans-serif; /* familia tipográfica */
  font-size: 14px; /* tamaño de la fuente */
  background-color: #07AD87; /* color de fondo */
  border: 1px solid #038265;
  padding: 10px 20px; /* más cuerpo al botón */
  border-radius: 3px; /* puntas redondeadas*/
}
nav a:hover {
  background-color: #038265; /* un simple cambio de fondo para cuando pasamos por encima */
}

Veamos el resultado

See the Pen botonera simple by rjrodriguez (@rjrodriguez) on CodePen

Link externo: botonera simple