Paginación CSS

Si se tiene una página con enlaces a varias paginas es posible que desee algún tipo de paginación:

Paginación Simple:

Creamos el contenedor de tipo bloque en línea con la clase .paginacion. Los enlaces se establecen como flotantes a la izquierda con float.

Para los enlaces se establece el color de letra en negro con color y el espaciado con padding

  • El enlace que se refiere a la página actual lo establecemos con la clase .activo.
  • para los demás enlaces queda establecido el efecto que cambia de color cuando se pasa el cursor encima con :hover:not(.activo).
  • también se establece la transición del cambio de color con transition: background .3s.

CSS:

.paginacion {
  display: inline-block;
}
.paginacion a {
  color: black;
  float: left;
  padding: 8px 16px;
}
.paginacion a.activo {
  background-color: green;
  color: white;
}
.paginacion a:hover:not(.activo){
  background-color: gray;
}

HTML:

<div class="paginacion">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="activo">2</a>
  <a href="#">3</a>
  <a href="#">&raquo;</a>
</div>

Ejemplo:

« 1 2 3 »

Bordes

Use la propiedad border para agregar bordes y redondeados para el primero y último enlace:

CSS

.paginacion a {
  border: 1px solid gray;
}
.paginacion a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.paginacion a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Ejemplo:

« 1 2 3 »

Espaciado

Podemos utilizar la propiedad margin para darle un espaciado entre los enlaces:

CSS:

paginacion a {
  margin: 0 4px
}

Ejemplo:

« 1 2 3 »

Ruta de Ubicación o BreadCrumbs

Una variante de Paginación son los llamados Breadcrumbs, por migajas de pan o la ruta o recorrido de ubicación actual:

CSS:

ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {
  display: inline;
}
ul.breadcrub li+li:before {
  padding: 8px;
  color: black;
  content: "/";
}

HTML:

<ul class="breadcrumbs">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Imágenes</a></li>
  <li><a href="#">Temporada</a></li>
  <li>Equipo</li>
</ul>

Ejemplo: