When the website is with many pages, we use pagination to create pages in a single page, it is the process of dividing a document into discrete pages, either electronic pages or printed pages.
<style> ul.pagination { display: inline-block; } ul.pagination li { display: inline-block; } ul.pagination li a { color: green; float: left; padding: 8px 16px; text-decoration: none; } </style> </head> <body> <p><i>Simple Pagination</i></p> <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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body>
In the above code snippet we have defined simple pagination, we created list of items by using ul elements, we have created pagination effect for list items
output
It creates pagination with borders
<style> ul.pagination { display: inline-block; } ul.pagination li { display: inline; } ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; border: 1px solid red; } ul.pagination li a.active { background-color: pink; color: white; border: 1px solid yellow; } ul.pagination li a:hover:not(.active) { background-color:red; } </style> </head> <body> <p>Bordered Pagination</p> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">TechFunda</a></li> <li><a href="#">2</a></li> <li><a class="active" href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">DotNetFunda</a></li> <li><a href="#">»</a></li> </ul> </body>
In the above code snippet we have defined the bordered pagination with hover effect, when the mouse is placed on the list it displays the background color and one list is set as active with displays the list as active with background color as pink and the hover not is used to create the when the mouse is placed on the active it does not change the color and background color, border ois used to create border in the pagination of li element
output
We use border radius property to cvreate border as rounded
<style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li { display: inline; } ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid orange; } .pagination li:first-child a { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .pagination li:last-child a { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } ul.pagination li a.active { background-color: green; color: white; border: 1px solid red; } ul.pagination li a:hover:not(.active) { background-color: pink; } </style> </head> <body> <h2>Pagination with Rounded Borders</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">TechFunda</a></li> <li><a class="active" href="#">2</a></li> <li><a href="#">ITFunda</a></li> <li><a href="#">4</a></li> <li><a href="#">DotNetFunda</a></li> <li><a href="#">6</a></li> <li><a href="#">KidsFunda</a></li> <li><a href="#">»</a></li> </ul> </body>
In the above code snippet we have defined the border as rounded by using property as border radius to first child element and last child element
output
We can create space between borders using margin property
ul.pagination li a{margin(0, 5px)}
In the above code snippet margin property to provide space between borders
<style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li { display: inline; } ul.pagination li a { color: black; float: left; margin:0 5px; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid orange; } .pagination li:first-child a { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .pagination li:last-child a { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } ul.pagination li a.active { background-color: green; color: white; border: 1px solid red; } ul.pagination li a:hover:not(.active) { background-color: pink; } </style> </head> <body> <h2>Space between Rounded Borders</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">TechFunda</a></li> <li><a class="active" href="#">2</a></li> <li><a href="#">ITFunda</a></li> <li><a href="#">4</a></li> <li><a href="#">DotNetFunda</a></li> <li><a href="#">6</a></li> <li><a href="#">KidsFunda</a></li> <li><a href="#">»</a></li> </ul> </body>
In the above code snippet we have defined space between border by using margin property in the pagination
output
It creates size of the text in the pagination by using font-size property
<style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li { display: inline; } ul.pagination li a { font-size:30px; color: black; float: left; margin:0 5px; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid orange; } .pagination li:first-child a { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .pagination li:last-child a { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } ul.pagination li a.active { background-color: green; color: white; border: 1px solid red; } ul.pagination li a:hover:not(.active) { background-color: pink; } </style> </head> <body> <h2>Space between Rounded Borders</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">TechFunda</a></li> <li><a class="active" href="#">2</a></li> <li><a href="#">ITFunda</a></li> <li><a href="#">4</a></li> <li><a href="#">DotNetFunda</a></li> <li><a href="#">6</a></li> <li><a href="#">KidsFunda</a></li> <li><a href="#">»</a></li> </ul> </body>
In the above code snippet we have defined the pagination size by using property fontsize in the ul element of pagination
output
It creates pagination center by using property text align center
<style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li { display: inline; } ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } ul.pagination li a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } ul.pagination li a:hover:not(.active) { background-color: #ddd; } div.center { text-align: center; } </style> </head> <body> <h2>Centered Pagination</h2> <div class="center"> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </div> </body>
In the above code snippet we have defined pagination to center by using text align property to center in the div section , we have the property in the div element to centers the pagination
output
Views: 5971 | Post Order: 135