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?
 You can more understand with my example shown below:

View Demo
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.

Copyright Reserved to Anything Learn. Powered by Blogger.