Exemplo de paginação CSS

Aprenda a usar CSS para criar paginação responsiva.

Paginação simples

Se o site tiver muitas páginas, você pode querer adicionar alguma função de paginação em cada página:

Exemplo

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

Experimente pessoalmente

página de navegação ativa suspenso

com .active classe destacada exibe a página atual e usa :hover seletor altera a cor de cada link de página:

Exemplo

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

Experimente pessoalmente

página de navegação ativa com arredondamentos

Se precisar de botões 'active' e 'hover' com arredondamentos, adicione border-radius propriedade:

Exemplo

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

Experimente pessoalmente

efeito de transição suspenso

Por favor, insira transition propriedade adiciona uma transição ao link da página, criando um efeito de transição ao passar o mouse por cima:

Exemplo

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

Experimente pessoalmente

página de navegação com borda

Use border propriedade adiciona uma borda à página de navegação:

Exemplo

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

Experimente pessoalmente

bordas arredondadas

Dica:Adicione bordas arredondadas ao primeiro e último link de navegação:

Exemplo

.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;
}

Experimente pessoalmente

espaço entre os links

Dica:Se não desejar combinar os links de página, adicione margin propriedade:

Exemplo

.pagination a {
  margin: 0 4px; /* Margem superior e inferior de 0, modificável */
}

Experimente pessoalmente

tamanho da página de navegação

Use font-size A propriedade altera o tamanho da página de navegação:

Exemplo

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

Experimente pessoalmente

páginas centralizadas

Para alinhar centralizado as páginas, use a página configurada text-align: center O elemento de contêiner (como <div>) envolve-o:

Exemplo

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

Experimente pessoalmente

Mais exemplos

Exemplo

Experimente pessoalmente

Pão-de-queijo

Outra forma de paginação é conhecida como "pão-de-queijo" (breadcrumbs):

Exemplo

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";
}

Experimente pessoalmente