CSS PAGINATION

Previous Next

CSS pagination is a way by which web users can easily jump anywhere in a large collection of related webpages. Pagination is generally in number form, which specifies nth webpage from starting.

In websites with a large number of webpages they sort the webpages in this manner.

Simple pagination

This is a simple pagination show next and previous buttons and a few pages in between.

.simple-pagination{
    color: white;
    background-color: #006699;
    padding: 10px 15px;
    border: 2px solid silver;
    text-decoration: none; /*to remove underline from numbers*/
    display: inline-block;
}

▶ Run the code

Output:

prev 1 2 3 4 5 6 7 next

Round pagination

To create rounded pagination add border-radius to the pagination class and set value to 50%.

.round-pagination{
    border-radius: 50%;
    color: white;
    background-color: #006699;
    padding: 10px 15px;
    border: 2px solid silver;
    text-decoration: none; /*to remove underline from numbers*/
    display: inline-block;
}

▶ Run the code

Output:

1 2 3 4 5 6 7

Pagination with Hover effect

Hover effect of pagination is initiated when you take the mouse pointer over the pagination buttons.

To define hover effect we need to add :hover CSS property for the pagination. Lets see in example below.

.hover-pagination{
    color: white;
    padding: 10px 15px;
    border: 2px solid silver;
    text-decoration: none;
    display: inline-block;
}

.hover-pagination:hover{
    color: white;
    background-color: #006699;
}

▶ Run the code

Output:

prev 1 2 3 4 5 6 7 next

Active Pagination

For quick knowledge for the user which page he is on currently, we make the page number representing that web page active on pagination.

To show that this pagination block is active we use sharp background-color for that section. Let's see in example.

.active{
    background-color: #006699;
    color: white;
}
.pagination{
    padding: 10px 15px;
    border: 2px solid silver;
    text-decoration: none;
    display: inline-block;
}
.pagination:hover:not(.active){
    background-color: silver;
}

▶ Run the code

Output:

prev 1 2 3 4 5 6 7 next

Centered Pagination

To beautify a web page with pagination it's better if our pagination is in the center of the page.

To align the pagination in the center of the webpage we can use margin property.

.div-pagination{
    margin: 0 auto;
    text-align: center;
}
.active{
    background-color: #006699;
    color: white;
}
.pagination{
    padding: 10px 15px;
    border: 2px solid silver;
    text-decoration: none;
    display: inline-block;
}
.pagination:hover:not(.active){
    background-color: silver;
}

▶ Run the code

Output:

prev 1 2 3 4 5 6 7 next

Previous Next