Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS Pagination

Improve Article
Save Article
Like Article
author
SrishtiGoel
proficient
11 published articles
Improve Article
Save Article
Like Article

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:

  1. Simple Pagination
  2. Active and Hoverable Pagination
  3. Rounded Active and Hoverable Buttons
  4. Hoverable Transition Effect
  5. Bordered Pagination
  6. Rounded Border Pagination
  7. Centered Pagination
  8. Space between Pagination
  9. 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:
 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: 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:
 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: 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:
 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: 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:
 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: 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:
 bordered pagination 
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:
 rounded border pagination 
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:
 centered pagination 
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:
 space between pagination 
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:
 pagination size

My Personal Notes
arrow_drop_up
Last Updated :
15 May, 2023
Like Article

Save Article

Similar Reads
1.
Primer CSS Previous/Next Pagination
2.
How to make a Pagination using HTML and CSS ?
3.
Materialize CSS Pagination
4.
How to we create Pagination in Materialize CSS ?
5.
Foundation CSS Kitchen Sink Pagination
6.
Foundation CSS Pagination Basics
7.
Foundation CSS Pagination Centered
8.
Foundation CSS Pagination
9.
Primer CSS Numbered Pagination
10.
Primer CSS Pagination
Related Tutorials
1.
Onsen UI
2.
React Material UI
3.
NuxtJS
4.
D3.js
5.
Spectre CSS
Previous
CSS media queries
Next

CSS Gradients
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
SrishtiGoel
SrishtiGoel
Vote for difficulty





Improved By :
Article Tags :
Practice Tags :
Report Issue 
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox