Exemplos de paginação CSS
Aprenda a criar uma paginação responsiva usando CSS.
Paginação Simples
Se você tem um site com muitas páginas, você pode querer adicionar algum tipo de paginação a cada página:
Exemplo
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Paginação ativa e flutuante
Realce a página atual com uma .active
classe e use o :hover
seletor para alterar a cor de cada link de página ao mover o mouse sobre eles:
Exemplo
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Botões arredondados ativos e flutuantes
Adicione a border-radiuspropriedade se desejar um botão arredondado "ativo" e "passar o mouse":
Exemplo
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Efeito de transição flutuante
Adicione a transitionpropriedade aos links da página para criar um efeito de transição ao passar o mouse:
Exemplo
.pagination a {
transition: background-color .3s;
}
Paginação com Borda
Use a borderpropriedade para adicionar bordas à paginação:
Exemplo
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Bordas arredondadas
Dica: adicione bordas arredondadas ao seu primeiro e último link na paginaçã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;
}
Espaço entre links
Dica: Adicione a marginpropriedade se não quiser agrupar os links da página:
Exemplo
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Tamanho da paginação
Altere o tamanho da paginação com a font-sizepropriedade:
Exemplo
.pagination a {
font-size: 22px;
}
Paginação Centrada
Para centralizar a paginação, envolva um elemento de contêiner (como <div>) em torno dele comtext-align:center
Exemplo
.center {
text-align: center;
}
Mais exemplos
Exemplo
Migalhas de pão
Outra variação da paginação é a chamada "migalha de pão":
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";
}