Open In App

CSS Pagination

Improve
Improve
Like Article
Like
Save
Share
Report

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 paginationRounded 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 paginationHoverable 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 effectBordered 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 paginationRounded 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 paginationCentered 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 paginationSpace 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 paginationPagination 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



Last Updated : 21 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads