Pagination is the process of dividing the document into pages and providing them with numbers.
Types of Pagination: There are many types of pagination in CSS. Some of them are given below:
- Simple Pagination
- Active and Hoverable Pagination
- Rounded Active and Hoverable Buttons
- Hoverable Transition Effect
- Bordered Pagination
- Rounded Border Pagination
- Centered Pagination
- Space between Pagination
- Pagination Size
Simple Pagination: This is the basic form of pagination.
Syntax:
.pagination {
display:type
}
.pagination body {
color:colorname
decoration:type
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 140px;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Simple Pagination</ div >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ body >
</ html >
|
Output:
Active and Hoverable Pagination: In this pagination, by using the active class the current page will be highlighted. Hover will change the color of the page link when the mouse moves over them.
Syntax:
.pagination body.active {
display:type
background-color:colorname
}
.pagination body:hover:not(.active) {
background-color:colorname
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 90px;
margin-bottom: 20px;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Active and Hoverable Pagination</ div >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a class = "active" href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ body >
</ html >
|
Output: Rounded Active and Hoverable Buttons: For rounded active and hoverable buttons just add border-radius property.
Syntax:
.pagination body.active {
display:type
background-color:colorname
border-radius:size
}
.pagination body:hover:not(.active) {
background-color:colorname
border-radius:size
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
border-radius: 5px;
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
border-radius: 5px;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 40px;
margin-bottom: 20px;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Rounded Active and Hoverable Pagination</ div >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a class = "active" href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ body >
</ html >
|
Output: Hoverable Transition Effect: Transition property is added to create a transition effect on hover.
Syntax:
.pagination body:hover {
transition:type
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 40px;
margin-bottom: 20px;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Hoverable Transition Effect Pagination</ div >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a class = "active" href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ body >
</ html >
|
Output: Bordered Pagination: In this type of pagination a border is added to the pagination. Use border property to add borders to the pagination.
Syntax:
.pagination body {
border:type
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 140px;
margin-bottom: 20px;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Bordered Pagination</ div >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a class = "active" href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ body >
</ html >
|
Output: Rounded Border Pagination: The border can be rounded using border-radius property.
Syntax:
.pagination body {
border:type
border-radius:size
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 110px;
margin-bottom: 20px;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Rounded Border Pagination</ div >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a class = "active" href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ body >
</ html >
|
Output:
Centered Pagination: Pagination can be centered by using text-align property.
Syntax:
.center {
text-align:center
}
.pagination body {
color:colorname
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.center {
text-align: center;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
text-align: center;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Centered Pagination</ div >
< div class = "center" >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a class = "active" href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ div >
</ body >
</ html >
|
Output: Space Between Pagination: Page links can be spaced if you do not want to group them. Use the margin property to provide space between the links.
Syntax:
.pagination body {
color:colorname
margin:type
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.center {
text-align: center;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
margin: 0px 5px;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
text-align: center;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Space Between Pagination</ div >
< div class = "center" >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a class = "active" href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ div >
</ body >
</ html >
|
Output: Pagination Size: The size of the pagination can be changed using the font-size property.
Syntax:
.pagination body {
color:colorname
font-size:size
}
Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
< html >
< head >
< style >
.pagination {
display: inline-block;
}
.center {
text-align: center;
}
.pagination a {
font-weight: bold;
font-size: 25px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
text-align: center;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
</ style >
</ head >
< body >
< div class = "GFG" >GeeksforGeeks</ div >
< div class = "peg" >Pagination Size</ div >
< div class = "center" >
< div class = "pagination" >
< a href = "#" >«</ a >
< a href = "#" >1</ a >
< a href = "#" >2</ a >
< a href = "#" >3</ a >
< a href = "#" >4</ a >
< a class = "active" href = "#" >5</ a >
< a href = "#" >6</ a >
< a href = "#" >7</ a >
< a href = "#" >8</ a >
< a href = "#" >9</ a >
< a href = "#" >10</ a >
< a href = "#" >»</ a >
</ div >
</ div >
</ body >
</ html >
|
Output: