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:
Post a Comment
Note: Only a member of this blog may post a comment.