A Source of Beginner-Friendly CSS Pagination Examples

Getting Started With CSS Pagination

CSS pagination is for sites consisting of multiple pages. The pagination process begins by listing links to all the separate pages.

In the example, we create a simple pagination CSS style:

.paginate {
    display: inline-block;
    padding: 2px;
    margin: 2px;
}

.paginate a {
    text-decoration: none;
    color: blue;
   float: left;
   padding: 10px 15px;
}

The first CSS pagination examples follow these steps:

• Most of the CSS pagination examples present the links and wrap them in <div>.
• Aligns links with float.
• Sets text-decoration to none to remove underlines from links.
• Adds padding and margin to make paginated links look neater.

Active and Hoverable

It is possible to highlight the page you are currently on by using the .active class and the :hover selector.

In the following pagination example, we assign :hover and .active to our list of links:

.paginate a.active {
    background-color: lightblue;
    color: lightblue;
}

.paginate a:hover:not(.active) {
    background-color: lightgray;
}

Rounded Corners

We make the following CSS pagination examples to have rounded corners buttons by applying the border-radius property.

The border-radius accepts values as length (pt, px, cm, etc.) or percentage (%) indicators.

In the example, we add the border-radius to the pagination process:

.paginate a {
    border-radius: 10px;
}

.paginate a.active {
    border-radius: 10px;
}

Transition Effect on Hover

The :hover selector allows us to change the styling of an element when a mouse cursor moves over it. However, changes happen at once.

The CSS transition property lets you indicate how quickly does the styling change.

We assign transition to our list in this CSS pagination example to make the transition of styles smoother:

.paginate a {
    transition: background-color .5s; 
}

Adding Borders

In the following CSS pagination examples, we add borders to paginated links. Borders separate the link buttons from one another.

«
1
2
3
4
5
»

You can customize CSS borders by defining colors, styles, and width values inside the border shorthand.

In the example, we add borders to our pagination:

.paginate a {
    border: 2px solid green;
}

The code below shows how to make rounded borders by using the border-radius property:

.paginate a:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.paginate a:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

Add Space Around Links

If you want to add space around each page link, use margin.

In the example, we use margin property with two values defined:

.paginate a {
    margin: 5px 10px;
}

Setting Text Size

You can easily manipulate the size of your page numbers with CSS. The font-size property changes the size of the text without changing the size of the HTML element.

We assign specific size (22px) to the numbers on this CSS pagination list example:

.paginate a {
    font-size: 22px;
}

Alignment

You can position the pagination list on the left, right, or at the center of the page.

To align the pagination, you need to wrap it in a container such as <div>, <span>, <p>, or others.

Then, you should apply text-align property with one of the following values: left, right, or center.

In the following example, we center the CSS pagination:

.center {
    text-align: center;
}

Breadcrumbs

Breadcrumbs are essentially a variation of pagination. It is for displaying a file path in categories. To create breadcrumbs, you should follow these steps:

• Perform HTML pagination by creating an unordered HTML list (<ul>).
• Style the unordered list.
• To remove the markers, we apply the list-style: none property.
• Assign display: inline to have the links aligned side by side.

In the example, we create the breadcrumbs pagination:

ul.bc {
    padding: 10px 15px;
    list-style: none;
    background-color: lightgreen;
}  	

ul.bc li {
    display: inline;
}

ul.bc li+li:before {
    padding: 10px;
    color: white;
    content: "/\00a0";
}

CSS Pagination Examples: Useful Tips

• CSS pagination is important for SEO as it helps search engines index posts and rank them.
• Bootstrap offers styled pagination links that you can use.