Ejemplo de paginación CSS
En este capítulo te mostraremos cómo crear ejemplos de paginación usando CSS.
Paginación simple
Si tu sitio web tiene muchas páginas, necesitarás usar paginación para navegar por cada página.
El siguiente ejemplo muestra cómo usar HTML y CSS para crear paginación:
Ejemplo de CSS
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
Pruébalo »
Estilo de paginación al hacer clic y al pasar el mouse
Si haces clic en la página actual, puedes usar.activepara establecer el estilo de la página actual; al pasar el mouse puedes usar:hoverel selector para modificar el estilo:
Ejemplo de CSS
background-color: #4C7EAF;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Pruébalo »
Ejemplo de CSS
background-color: #4C7EAF;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Pruébalo »
Estilo de esquinas redondeadas
Puedes usarborder-radiusla propiedad para agregar esquinas redondeadas a la página seleccionada:
Ejemplo de CSS
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Pruébalo »
Efecto de transición al pasar el mouse
Podemos agregartransitionla propiedad para añadir un efecto de transición cuando el mouse se mueve sobre el número de página:
Paginación con bordes
Podemos usarborderla propiedad para agregar paginación con bordes:
Bordes redondeados
Consejo:Agrega esquinas redondeadas al primer y al último enlace de paginación:
Ejemplo de CSS
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Pruébalo »
Espaciado de paginación
Consejo:Puedes usarmarginla propiedad para agregar espacio directamente entre cada número de página:
Ejemplo de CSS
margin: 0 4px; /* 0 corresponde a la parte superior e inferior, puedes modificarlo para ver el efecto */
}
Pruébalo »
Tamaño de fuente de la paginación
Podemos usarfont-sizela propiedad para establecer el tamaño de fuente de la paginación:
Paginación centrada
Si deseas centrar la paginación, puedes agregar en el elemento contenedor (como <div>) eltext-align:centerestilo:
Más ejemplos
Migas de pan
Otro tipo de navegación son las migas de pan, como se muestra en el siguiente ejemplo:
Ejemplo de CSS
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";
}
Pruébalo »