CSS | Pagination

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:

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:

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:

Output:

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

.pagination body:hover {
    transition:type
}

Example:

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:

Output:

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

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

Example:

Output:

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

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

Example:

Output:

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:

Output:

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

Syntax:

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

Example:

Output: