15. Ejemplos de paginación con CSS

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="#">&laquo;</a>
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	<a href="#">&raquo;</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="#">&laquo;</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="#">&raquo;</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; /* Gray */
}

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="#">&laquo;</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="#">&raquo;</a>
</div>

</body>
</html>

Espacio entre enlaces

Añadimos la propiedad margin para espaciar unos enlaces con otros.

Ejm

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

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="#">&laquo;</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="#">&raquo;</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>
Scroll al inicio