CSS Pagination

CSS pagination is a very useful technique for indexing different pages of a website on the homepage. If your website has lots of pages, you have to add some sort of pagination to each page.

Following are the different types of pagination:

Basic Pagination

This is the simplest pagination. You have to use pagination class to an <ul> element to attain this pagination.

See this example:

Basic Pagination with arrow

This pagination is used when you have lots of pages. It facilitates you to use arrow for previous and next page.

See this example:

Active/Current link and Hoverable Pagination

This pagination is used when you want to highlight the current page and change the color of each page-link when you move the mouse over them. You have to use .active class, and the :hover selector for this effect.

See this example:

Rounded Active and Hoverable Pagination

In this pagination, you use border-radius property to get the rounded "active" and "hover" button.

See this example:

Bordered Pagination

In this pagination, you use border property to add borders to the pagination.

See this example:

Rounded Border Pagination

This pagination method is used to add rounded borders to your first and last link of pagination.

See this example:

Space Between Pagination

The margin property is used to get the space between the links in the pagination.

See this example:

Pagination Size

You can change the size of the pagination by using font-size property.

See this example:

Centered Pagination

You have to wrap a container element around it (like