Exemples de pagination CSS
Apprenez à créer une pagination réactive à l'aide de CSS.
Mise en page simple
Si vous avez un site Web avec beaucoup de pages, vous souhaiterez peut-être ajouter une sorte de pagination à chaque page :
Exemple
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Pagination active et survolable
Mettez en surbrillance la page actuelle avec une .active
classe et utilisez le :hover
sélecteur pour changer la couleur de chaque lien de page lorsque vous déplacez la souris dessus :
Exemple
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Boutons actifs et flottants arrondis
Ajoutez la border-radiuspropriété si vous voulez un bouton "actif" et "survol" arrondi :
Exemple
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Effet de transition planable
Ajoutez la transitionpropriété aux liens de page pour créer un effet de transition au survol :
Exemple
.pagination a {
transition: background-color .3s;
}
Pagination bordée
Utilisez la borderpropriété pour ajouter des bordures à la pagination :
Exemple
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Bordures arrondies
Astuce : Ajoutez des bordures arrondies à votre premier et dernier lien dans la pagination :
Exemple
.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;
}
Espace entre les liens
Astuce : Ajoutez la marginpropriété si vous ne souhaitez pas regrouper les liens de page :
Exemple
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Taille de mise en page
Modifiez la taille de la pagination avec la font-sizepropriété :
Exemple
.pagination a {
font-size: 22px;
}
Pagination centrée
Pour centrer la pagination, enroulez un élément conteneur (comme <div>) autour d'elle avec text-align:center
Exemple
.center {
text-align: center;
}
Plus d'exemples
Exemple
Chapelure
Une autre variante de pagination est ce qu'on appelle le "fil d'Ariane":
Exemple
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";
}