COMO USAR PAGINAÇÃO CSS
Conteúdo
Como aplicar estilo css nos botões de paginação?
Basta usar um css simples como esse aqui:
<!-- Primeiro é construída a lista com a classe pagination -->
<ul class="pagination">
<!-- Abre a primeira linha da lista -->
<li>
<!-- Insere o link para a página 1 com o texto de duas setas, algo meio padrão na web -->
<a href="https://diretoaoponto-tech.com.br/?p=1" target="_self">«</a>
<!-- Fecha a primeira linha -->
</li>
<!-- Inicia a próxima linha -->
<li>
<!-- Coloca um link sem href apenas com a classe active, pois é a página atual, e o texto 1 -->
<a class="active">1</a>
<!-- Fecha a linha -->
</li>
<!-- Abre a linha para o botão 2 -->
<li>
<!-- Insere o link para a página dois com o texto "2" -->
<a href="https://diretoaoponto-tech.com.br/?p=2">2</a>
<!-- Fecha a linha -->
</li>
<!-- Abre a linha para a última página. -->
<li>
<!-- com as setas apontadas para a direita. Nesse caso a última página é a 2 mesmo -->
<a href="https://diretoaoponto-tech.com.br/?p=2" target="_self">»</a>
<!-- Fecha a última linha-->
</li>
<!-- Fecha a lista-->
</ul>
Ficando assim:
Agora é feito o CSS para colocar o estilo.
/** Abre a configuração de estilo CSS **/
<style rel="stylesheet" scoped="scoped" type="text/css">
ul.pagination { /** Inicia a configiração da lista pagination**/
display: inline-block; /** Inicia uma nova linha e espande para esquerda **/
padding: 0; /** Retira o espaço interno da lista **/
}
ul.pagination li { /** Inicia a configuração da linha da lista **/
display: inline; /** Deixa uma linha do lado da outra **/
}
ul.pagination li a{ /** Coloca o estilo no botão que tem link a **/
color: black; /** Fonte preta **/
float: left; /** Alinha a esquerda **/
padding: 8px 16px; /** Adiciona espaço na linha **/
text-decoration: none; /** Tira decoração do texto **/
}
ul.pagination li a.active { /** Coloca o estilo no link com a classe active **/
background-color: blue; /** Define uma cor de fundo para o botão da página atual **/
color: white; /** A cor da fonte também **/
}
ul.pagination li a:hover:not(.active) {/** Insere o estilo para quando o mouse passar por cima do link exeto no botão da página atual **/
background-color: #ddd; /** Insere um tom de cinza **/
}
</style>
/** Fecha a configuração de estilo **/
Ficando assim:
Nesse código tem um pequeno exemplo de todos os efeitos comuns em botões de página.
