Paginación simple
Si tienes un sitio web con muchas páginas, es posible que desees agregar algún tipo de paginación a cada página.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Pagination Simple</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">»</a>
</div>
</body>
</html>
Paginación activa y desplazable
Resalta 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.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: red;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
Botones activos y flotantes redondeados
Añadimos la propiedad border-radius para redondear nuestros botones.
Ejm
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
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.
Ejm
.pagination a {
transition: background-color .3s;
}
Incluir bordes
Utilizamos la propiedad border.
Ejm
.pagination a {
border: 1px solid #ddd;
}
Bordes redondeados
Consejo: agrega bordes redondeados a tu primer y último enlace en la paginación.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
.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;
}
</style>
</head>
<body>
<h2>Pagination with Rounded Borders</h2>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</body>
</html>
Espacio entre enlaces
Añadimos la propiedad margin para espaciar unos enlaces con otros.
Ejm
.pagination a {
margin: 0 4px;
}
Tamaño de los enlaces
Para ello utilizamos la propiedad font-size.
Ejm
.pagination a {
font-size: 22px;
}
Paginación centrada
Para centrar la paginación, envuelva un elemento contenedor (como <div>) alrededor con text-align:center.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Centered Pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>
Breadcrumbs
Otra variación de la paginación son las llamadas «migas de pan» o breadcrumbs.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
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";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>
<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
</body>
</html>