How to create a responsive pagination using CSS?

A website often consists of a large number of pages that contain various content. In a situation, where your website has numerous pages, adding a pagination that is responsive becomes a necessity. The significance of a pagination can be emphasized by the fact that it makes navigation easy for a user. It allows a user to view a web page of their own choice and lets them know which page they are on. Subjects under discussion in this write-up are listed below.

1. How to create a responsive pagination

2. How to style a pagination

How to create a responsive pagination

Let’s first create a simple pagination. For the purpose of doing so we need to create a div container and nest various anchor tags which represent different pages of a website using numeric digits. Here is the relevant HTML code.

HTML

The first and the last anchor tag use the hex codes for adding a left-pointing and a right-pointing double angle quotation marks.

Now let us style the anchor tags using basic CSS.

CSS

Here we have assigned some padding to the anchor tags and some color to the text inside them, moreover, we have floated the whole pagination to the left and to remove the underline from the anchor tags we have set the text-decoration to none.

Output

A simple pagination was created successfully.

Now that we know how to make a basic pagination, let’s learn how we can make its responsive and interactive using various techniques.

How to make a pagination active and hoverable

Paginations need to be in an active state as well as hoverable so that the user knows on which page he/she is on.

HTML

In the above code, we are assigning the fourth anchor tag the active state.

CSS

The above code specifies that when a page is in an active state the corresponding anchor tag will have a rosy brown background color and the text color will be white. Meanwhile, when a user hovers over the anchor tags that are not active the background color will change to light gray.

Output

An active and hoverable pagination was generated.

How to style a pagination

Now that we have learnt how to create a responsive pagination, let’s dive into various ways in which we can style the pagination.

How to add borders to a pagination

In order to create borders around each of the anchor tags in a pagination, the CSS border property is used.

CSS

In the above code, we are specifying that each anchor tag of the pagination will have a border of 1px with solid gray color.

Output

Borders have successfully been added to the pagination.

How to alter the size of a pagination

By simply changing the font size of the text inside each of the anchor tags, you can alter the size of a responsive pagination.

CSS

Here we have set the font size to 30px.

Output

The size of the pagination has been enhanced.

How to center a pagination

It often happens that the structure of the web page requires the web developers to place the pagination in the center of the page. Follow the example below.

HTML

In order to center the whole pagination, we have created another div container and nested the other div inside it.

CSS

Now using the class assigned to the first div, we are aligning the text to center. Meanwhile, we are setting the display of the second div to inline-block to center the entire pagination.

Output

The pagination has been centered.

How to add a transition effect to a pagination

Simply assign some transition duration to the anchor tags to add a transition effect every time a user hovers over the anchor tags.

CSS

The transition duration has been set to 0.5 seconds.

Output

A transition effect has been added to the pagination.

Conclusion

A responsive pagination is an integral part of a website that consists of a numerous number of pages. It makes navigation easy for users and let them which page they are on. A basic pagination can be created using HTML elements such as div, and anchor tags. Furthermore, you can make it responsive by adding an active state and a hover effect to it. Moreover, you can style a pagination in many ways such as you can alter its size, create borders, add a transition effect, etc using various CSS properties. In this write-up, you have been shown how to create and style a responsive pagination.