CSS Pagination

Pagination is somewhat similar to a navigation bar except that it has different page numbers that you can directly access. The list contains a series of page numbers (consecutive) and generally has forward and backward buttons at the end to navigate to next page. Pagination is very useful when the website containing data that is spread through multiple pages, like search engines.

Simple Pagination

As mentioned before, the simplest form of pagination contains 2 parts:

  • List of page numbers: A list of numbers in consecutive order where each number is a link to the corresponding page.
  • Forward and Backward Button: You can navigate to the immediate next or immediate previous page using these buttons. It is also helpful when your destination page is not present on the list.

The display property for pagination is generally set to inline-block to keep the list in a horizontal line.

Active and Hoverable Pagination

To highlight the current page you can style the corresponding page number, a bit different than other page numbers in the list. This can be done by creating a .active class and using it with the anchor tag for the current page. You can also add a hover effect that for other pages to notify the mouse pointer.

Rounded Corners

For further styling, you can make the corners rounded for the highlight and hover effect on the page numbers.

Transition Effect

We can add a transition effect to be applied with the hover.

Border

Adding borders to the page numbers for a neat list. To style it more, we can make the borders rounded for the first and last link or add space between the links.

Pagination Size

We can increase or decrease the font size using the font-size property.

Center Align

To align the pagination int center you can set the text-align property to center.