CSS Pagination
CSS Pagination with Programming Examples
I this tutorial you will learn, how to create a responsive pagination using the CSS, learn hare how to make a pagination with the use of HTML and CSS.
If you have a website or you want to make a website and, in your website a huge number of pages then you may add some short of pagination.
Here you will read and see the programming examples of different types of paginations such as, Border Pagination, Hover Effect Pagination, Active Status Pagination, Changing Size Pagination, Rounded Pagination etc.
What is CSS Pagination?
A CSS Pagination is typically composed of numbers and alphabets with left and right arrows to next and previous. Each of them contains the pages and articles link.
For Example: – You have as many as articles in your website, do you think a simple navigation bar will be enough to help users navigate through 100 articles, of course not, that time Pagination is help the user to navigate the all articles. Look below the simple programming examples with output.
Programming Examples of CSS Pagination;
<!DOCTYPE html> <html lang="en"> <head> <title>CSS pagination</title> <style type="text/css"> .pagination{ display: inline-block; margin: 0; padding: 0;} .pagination a{ text-decoration: none; color: white; padding: 5px ; float: left;} .pagination li{display: inline;} div{height: 29px width: 140px; background: green; border-radius: 10px;} </style> </head> <body> <div> <ul class="pagination"> <li><a href="#"><</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">></a></li> </ul> </div> </body> </html> |
Output of above Programming Examples;
Bordered Pagination
Now, here we will create a pagination with border, above you can saw pagination with green background and all the number is white but it has not a border.
For create the border on pagination we use Border and Border-Right properties.
Here you see the pagination with the border. Look below the programming examples for better understanding.
Programming Example of Border Pagination;
<!DOCTYPE html> <html lang="en"> <head> <title>CSS pagination</title> <style type="text/css"> .pagination{ display: inline-block; margin: 0; padding: 0; border: 1px solid darkgreen; font-weight: bold;} .pagination a{text-decoration: none; color: green; padding: 5px ; float: left; border-right: 1px solid darkgreen;} .pagination li{display: inline .container{text-align: center;} .pagination li:last-child>a {border: none;} </style> </head> <body> <div class="container"> <ul class="pagination"> <li><a href="#"><</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">></a></li> </ul> </div> </body> </html> |
Output of above Programming Examples;
Above you can see the output of programming example of bordered pagination, here we used the border property to set the border.
Hover Effect Pagination
Here is a basic hover effect of pagination design, we create here a hover effect pagination, to create this style we need to use the hover property in the CSS pagination. Look below the programming example to better understanding.
Programming Examples of Hover Effect;
<!DOCTYPE html> <html lang="en"> <head> <title>CSS pagination</title> <style type="text/css"> .pagination{display: inline-block; margin: 0; padding: 0; border: 1px solid darkgreen; font-weight: bold;} .pagination a{text-decoration: none; color: green padding: 5px ; float: left; border-right: 1px solid darkgreen; transition-duration: 1s;} .pagination a:hover{color: white; background: green;} .pagination li{display: inline;} .container{text-align: center;} .pagination li:last-child>a {border: none;} </style> </head> <body> <div class="container"> <ul class="pagination"> <li><a href="#"><</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">></a></li> </ul> </div> </body> </html> |
Output of above Programming Examples;
Output of Hover Pagination in Video mode for better understand.
You can sea the above output hover pagination, when mouse is over color of number and background is changed in 1 second.
Active Status of Pagination
Here we create an active status of CSS pagination. It is highly recommended to highlight the link where the users are currently in for easier navigation.
To create this, simply add the active class name to the corresponding link where the user is currently in.
Look below the programming examples of Active Status Pagination to better understanding.
Programming Examples of Active Status Pagination;
<!DOCTYPE html> <html lang="en"> <head> <title>CSS pagination</title> <style type="text/css"> .pagination{display: inline-block; margin: 0; padding: 0; border: 1px solid blue; font-weight: bold;} .pagination a{text-decoration: none; color: black; padding: 5px ; float: left; border-right: 1px solid blue; transition-duration: 1s;} .pagination a:hover{color: white; background:#0076ff;} .paginationli{display: inline;} .container{text-align: center;} .pagination li:last-child>a {border: none;} .active{color: white; background: #0076ff;} </style> </head> <body> <div class="container"> <ul class="pagination"> <li><a href="#"><</a></li> <li><a href="#" class="active">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">></a></li> </ul> </div> </body> </html> |
Output of above programming example in video mode;
Above you can see the output of video of active status CSS pagination, one number is active that is always blue background.
Rounded Pagination
Now, here you see the rounded CSS Pagination, to create this we need to use the border-radius in the pagination. For better understanding look below the programming example.
Programming Examples Rounded CSS Pagination;
<!DOCTYPE html> <html lang="en"> <head> <title>CSS pagination</title> <style type="text/css"> .pagination{ display: inline-block; margin: 0; padding: 0; border: 2px solid rgb(179, 0, 255); font-weight: bold; font-size: 20px; border-radius: 20px;} .paginationa{ text-decoration: none; color: rgb(8, 114, 3); padding: 5px ; float: left; border-right: 2px solid rgb(133, 7, 212); transition-duration: 1s;} .pagination a:hover{color: white; background:#9103f7;} .pagination li{display: inline;} .container{text-align: center;} .pagination li:last-child>a {border: none;} .active{color: white; background: #8c00ff;} </style> </head> <body> <div class="container"> <ul class="pagination"> <li><a href="#"><</a></li> <li><a href="#"class="active">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><ahref="#">></a></li> </ul> </div> </body> </html> |
Output of above rounded Pagination Programming Examples;
Above you see the output of rounder pagination, this is a different style of pagination look fantastic you can use this in your blog or webpages.
You can create this different with a different color and style with your own style.
So, in this tutorial you learned the CSS Pagination with different – different style, like Border Pagination, Hover Effect Pagination, Active Status Pagination, Changing Size Pagination, Rounded Pagination. I hope you read this better and learn something new from this tutorial.
If you try to make this type of pagination from your blog and revision project, you can copy this pagination programming for revision purpose.
Read Also-
- Learn all Tutorial of HTML with Programming Examples.
- Learn General Knowledge of Competitive Exams.
- Learn All About Computer basic to advanced.
- Read how to create Circle Ring Animation from CSS.
- Learn all Tutorial of CSS with Programming.
2 Comments
zoritoler imol · July 1, 2022 at 12:11 pm
You should take part in a contest for one of the best blogs on the web. I will recommend this site!
Leon Enck · September 23, 2022 at 8:40 am
Some genuinely good info , Glad I observed this.