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: This example shows the use of CSS Pagination.

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.

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.

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.

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.

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.

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.

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.

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.

Output:

S

SrishtiGoel

Follow

Improve