What is pagination in CSS
Pagination means we target one page to another page related from the same page data we use pagination at the product page on category page because there is a lot of data we cannot show the data on the same page so we create pagination.
How to create pagination with CSS and HTML?
CSS Code:
<style>
.anythingPagination {
max-width: 600px;
margin: 0 auto;
}
.anythingPagination a {
display: inline-block;
padding: 8px 16px;
text-decoration: none;
color: #333;
border: 1px solid #ccc;
margin: 0;
}
.anythingPagination a:hover {
background: #ddd;
}
.anythingPagination a:active {
background: #666;
color: #fff;
}
.anythingPagination a.active {
background: #0bf;
border: 1px solid #0bf;
color: #fff;
}
.anythingPagination a:first-child {
border-radius: 5px 0 0 5px;
}
.anythingPagination a:last-child {
border-radius: 0 5px 5px 0;
}
</style>
HTML Code:
<div class="anythingPagination">
<a href="#">Prev</a>
<a href="#">1</a>
<a href="#">2</a>
<a class="active" href="#">3</a>
<a href="#">4</a>
<a href="#">Next</a>
</div>
No comments:
Note: Only a member of this blog may post a comment.