Ejemplo de paginación CSS

Aprende a crear una paginación responsive utilizando CSS.

Paginación simple

Si en el sitio web hay muchas páginas, es posible que desee agregar alguna función de paginación en cada página:

Ejemplo

.pagination {
  display: inline-block;
}
.pagination a {
  color: negro;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

Pruebe personalmente

Página de paginación activa y redondeada

Con .active Clase para resaltar la página actual y usarla cuando el ratón se mueve sobre ellas :hover Selector para cambiar el color de cada enlace de la página:

Ejemplo

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

Pruebe personalmente

Página de paginación activa y redondeada

Si necesita botones redondeados "active" y "hover", agregue border-radius Propiedad:

Ejemplo

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

Pruebe personalmente

Efecto de transición al pasar el ratón

Por favor, coloque transition Propiedad para agregar un efecto de transición al pasar el ratón sobre los enlaces de la página:

Ejemplo

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

Pruebe personalmente

Página con bordes

Utilice border Propiedad para agregar bordes a la paginación:

Ejemplo

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

Pruebe personalmente

Bordes redondeados

Consejo:Agregar bordes redondeados en los enlaces de la primera y última página de 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;
}

Pruebe personalmente

Espacio entre los enlaces

Consejo:Si no desea combinar los enlaces de la página, agregue margin Propiedad:

Ejemplo

.pagination a {
  margin: 0 4px; /* Margen superior e inferior externo de 0, se puede modificar libremente */
}

Pruebe personalmente

Tamaño de la página

Utilice font-size Cambiar el tamaño de la página a través de la propiedad:

Ejemplo

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

Pruebe personalmente

Página centrada

Para alinear el texto al centro de la página, utilice el que ha sido configurado text-align:center El elemento contenedor (como <div>) lo rodea:

Ejemplo

.center {}}
  text-align: center;
}

Pruebe personalmente

Más ejemplos

Ejemplo

Pruebe personalmente

Miga de pan

Otra forma de paginación es lo que se llama "miga de pan" (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: negro;
  content: "\00a0";
}

Pruebe personalmente