CSS | Pagination

Last Updated : 04 Dec, 2018

Read

Discuss

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:

<!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:
simple pagination

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:

<!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:
active pagination

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:

<!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:
rounded and active pagination

Hoverable Transition Effect: Transition property is added to create a transition effect on hover.
Syntax:

.pagination body:hover {
    transition:type
}

Example:

<!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:
hover transition effect

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:

<!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:
bordered pagination

Rounded Border Pagination: Border can be rounded using border-radius property.
Syntax:

.pagination body {
    border:type
    border-radius:size
}

Example:

<!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:
rounded border pagination

Centered Pagination: Pagination can be centered by using text-align property.
Syntax:

.center {
    text-align:center
}
.pagination body {
    color:colorname
}

Example:

<!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:
centered pagination

Space Between Pagination: Page links can be spaced if you do not want to group them. Use margin property to provide space between the links.

Syntax:

.pagination body {
    color:colorname
    margin:type
}

Example:

<!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:
space between pagination

Pagination Size: The size of the pagination can be changed using font-size property.

Syntax:

.pagination body {
    color:colorname
    font-size:size
}

Example:

<!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:
pagination size

My Personal Notes

Related Articles

CSS | Pagination

Full Stack Development with React & Node JS - Live

JAVA Backend Development - Live

JavaScript Foundation - Self Paced

Python Backend Development with Django - Live

Master Java Programming - Complete Beginner to Advanced

Master C++ Programming - Complete Beginner to Advanced

CBSE Class 12 Computer Science

Mastering Data Analytics

Data Structures and Algorithms - Self Paced

GATE CS & IT 2024

Python Programming Foundation -Self Paced

Data Structures & Algorithms in Python - Self Paced

Master C Programming with Data Structures

Complete Machine Learning & Data Science Program

System Design - Live

Complete Interview Preparation - Self Paced

Complete Test Series for Service-Based Companies

Complete Test Series for Product-Based Companies

DSA Live for Working Professionals - Live

DevOps Engineering - Planning to Production

Android App Development with Kotlin - Live

Start Your Coding Journey Now!

Related Articles

CSS | Pagination

Please Login to comment...

Full Stack Development with React & Node JS - Live

JAVA Backend Development - Live

JavaScript Foundation - Self Paced

Python Backend Development with Django - Live

Master Java Programming - Complete Beginner to Advanced

Master C++ Programming - Complete Beginner to Advanced

CBSE Class 12 Computer Science

Mastering Data Analytics

Data Structures and Algorithms - Self Paced

GATE CS & IT 2024

Python Programming Foundation -Self Paced

Data Structures & Algorithms in Python - Self Paced

Master C Programming with Data Structures

Complete Machine Learning & Data Science Program

System Design - Live

Complete Interview Preparation - Self Paced

Complete Test Series for Service-Based Companies

Complete Test Series for Product-Based Companies

DSA Live for Working Professionals - Live

DevOps Engineering - Planning to Production

Android App Development with Kotlin - Live

Start Your Coding Journey Now!