Ejemplos de paginación CSS
Aprenda a crear una paginación receptiva usando CSS.
Paginación simple
Si tiene un sitio web con muchas páginas, es posible que desee 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;
}
Paginación activa y desplazable
Resalte la página actual con una .active
clase y use el :hover
selector 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;}
Botones activos y flotantes redondeados
Agregue la border-radiuspropiedad si desea un botón "activo" y "pasar" redondeado:
Ejemplo
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Efecto de transición flotante
Agregue la transitionpropiedad 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;
}
Paginación bordeada
Use la borderpropiedad para agregar bordes a la paginación:
Ejemplo
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Bordes redondeados
Consejo: 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;
}
Espacio entre enlaces
Sugerencia: agregue la marginpropiedad si no desea agrupar los enlaces de la página:
Ejemplo
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Tamaño de paginación
Cambia el tamaño de la paginación con la font-sizepropiedad:
Ejemplo
.pagination a {
font-size: 22px;
}
Paginación centrada
Para centrar la paginación, envuelva un elemento contenedor (como <div>) a su alrededor con text-align:center
Ejemplo
.center {
text-align: center;
}
Más ejemplos
Ejemplo
Migas de pan
Otra variación de la paginación son las llamadas "migas de pan":
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";
}