CSS Pagination Examples

---

Aprenda a crear una paginación responsive usando CSS.

---

Paginación sencilla

Si tienes un sitio web con muchas páginas, es posible que desees agregar algún tipo de paginación a cada página:

Ejemplo:

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

Ver ejemplo

---

Paginación activa y desplazable

Resalte la página actual con una clase .active y use el selector :hover para cambiar el color de cada enlace de página cuando mueva el mouse sobre ellos:

Ejemplo:

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

Ver ejemplo

---

Botones activos y flotantes redondeados

Agregue la propiedad border-radius si desea un botón redondeado "activo" y con estilo "hover":

Ejemplo:

.pagination a {
  border-radius: 5px;
}

.pagination a.active {
  border-radius: 5px;
}

Ver ejemplo

---

Efecto de transición flotante

Agregue la propiedad transition a los enlaces de la página para crear un efecto de transición al pasar el mouse:

Ejemplo:

.pagination a {
  transition: background-color .3s;
}

Ver ejemplo

---

Paginación bordeada

Use la propiedad border para agregar bordes a la paginación:

Ejemplo:

.pagination a {
  border: 1px solid #ddd; /* Gray */
}

Ver ejemplo

---

Bordes redondeados

Tip: Agregue bordes redondeados a su primer y último enlace en la paginación:

Ejemplo:

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Ver ejemplo

---

Espacio entre enlaces

Tip: Agregue la propiedad margin si no deseas agrupar los enlaces de la página:

Ejemplo:

.pagination a {
  margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}

Ver ejemplo

---

Tamaño de paginación

Cambia el tamaño de la paginación con la propiedad font-size:

Ejemplo:

.pagination a {
  font-size: 22px;
}

Ver ejemplo

---

Paginación centrada

Para centrar la paginación, envuelva un elemento contenedor (como <div>) alrededor con text-align:center

Ejemplo:

.center {
  text-align: center;
}

Ver ejemplo

---

Más ejemplos

Ejemplo:

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

Ver ejemplo

---

Breadcrumbs

Otra variación de la paginación son las llamadas "breadcrumbs":

Ejemplo:

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

Ver ejemplo

---

Traducido con 💚 desde W3Schools.com