CSS pagination is a technique of creating page numbers for a website. This help users to easily navigate between large amounts of content. In this chapter, we will learn how to setup and style pagination using CSS.
CSS Pagination Example
Here is a example of pagination styled using CSS.
First Page
Table of Contents
- Setup Pagination For a Website
- Simple Pagination Example
- Styling Pagination Using CSS
- Rounded Pagination Buttons
- Hoverable Transition Effect
- Bordered Pagination
- Space Between Links
- Pagination Size
- Centered Pagination
- Next and Previous Buttons
- Breadcrumb Pagination
- Pagination With List
How to Setup Pagination For a Website?
To set up pagination for a website, you need to break your content into small pages and provide navigation to move between them in every page. Let’s see step by step procedure for setting up pagination.
Setup HTML Structure
First we need to set HTML structure for pagination setup. We can use anchor tags enclosed in div elements for this. Following is code for HTML structure of a pagination setup.
<div class="pagination"><a href="#">«</a><!-- Previous Page --><a href="#" class="active">1</a><a href="#">2</a><a href="#">3</a><a href="#">»</a><!-- Next Page --></div><div id="page1" class="page active">Page 1 Shows....</div><div id="page2" class="page">Page 2 Shows....</div>
Control Visibility With CSS
Initially all the pages should be invisible, expect the first page. For this, we can use display property as none for all pages. As class “active” is added to first page, it will be visible initially.
.pagination{display: flex;justify-content: center;}.page{display: none;}.active{display: block;}
Pagination Logic With JavaScript
Now, we need to add some JavaScript to handle pagination logic. We can capture click event on pagination links using JavaScript addEventListener() method and change visibility of pages based on that.
Simple Pagination Example
The example belows shows simple pagination setup developed using the above steps.
Example
<!DOCTYPE html><html><head><style>body{ height: 150px; } .pagination { display: flex; justify-content: center; margin: 20px 0; }.pagination a { color: green; border: 5px solid #ddd; padding: 5px 10px; margin: 0 5px; }.page { display: none; }.active { display: block; } </style></head><body><div class="pagination"><a href="#page1">1</a><a href="#page2">2</a><a href="#page3">3</a><a href="#page4">4</a><a href="#page5">5</a></div><div id="page1" class="page active">Page 1 Shows....</div><div id="page2" class="page">Page 2 Shows....</div><div id="page3" class="page">Page 3 Shows....</div><div id="page4" class="page">Page 4 Shows....</div><div id="page5" class="page">Page 5 Shows....</div><script> document.addEventListener('DOMContentLoaded', function() { const pages = document.querySelectorAll('.pagination a'); const contentPages = document.querySelectorAll('.page');pages.forEach(page => { page.addEventListener('click', function(event) { event.preventDefault();// Remove 'active' class from all content pages contentPages.forEach(p => p.classList.remove('active'));// Find the target page and display it const targetPage = document.querySelector(this.getAttribute('href')); if (targetPage) { targetPage.classList.add('active'); }// Add 'active' class to the clicked link this.classList.add('active'); }); }); }); </script></body></html></pre>Styling Pagination Using CSS
To style pagination links, we can use pseudo-class :active and :hover.
- Pseudo-class :active Can be used to highlight current page in pagination links.
- Pseudo-class :hover Can be used to style mouse hover states of pagination link.
The following example shows how these properties can enhance appearance of pagination links.
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; list-style: none; padding: 0; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; } .pagination a.active-link { background-color: violet; color: white; } .pagination a:hover:not(.active-link) { background-color: pink; } </style></head><body><div class="pagination"><a href="#">«</a><a href="#" class="active-link">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a><a href="#">»</a></div></body></html></pre>Rounded Pagination Buttons
We can create a pagination links with a rounded button by using border-radius CSS property. Let see an example:
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; list-style: none; padding: 0; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; border-radius: 8px; } .pagination a.active-link { background-color: violet; color: white; } .pagination a:hover:not(.active-link) { background-color: pink; } </style></head><body><div class="pagination"><a href="#">«</a><a href="#" class="active-link">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a><a href="#">»</a></div></body></html></pre>Hoverable Transition Effect
We can make pagination link smooth with transition effects when hovering over the each page links using transition property. Let see an example:
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; list-style: none; padding: 0; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; } .pagination a.active-link { background-color: violet; color: white; } .pagination a:hover:not(.active-link) { background-color: pink; } </style></head><body><div class="pagination"><a href="#">«</a><a href="#" class="active-link">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a><a href="#">»</a></div></body></html></pre>Bordered Pagination
To add border to pagination links, we can use CSS border property. Here is an example:
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; list-style: none; padding: 0; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; border: 2px solid black; } .pagination a.active-link { background-color: violet; color: white; } .pagination a:hover:not(.active-link) { background-color: pink; } </style></head><body><div class="pagination"><a href="#">«</a><a href="#" class="active-link">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a><a href="#">»</a></div></body></html></pre>Space Between Links
We can use CSS margin property to create a space around each link in the pagination component. Let see an example for this.
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; list-style: none; padding: 0; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; border: 2px solid black; margin: 2px; } .pagination a.active-link { background-color: violet; color: white; } .pagination a:hover:not(.active-link) { background-color: pink; } </style></head><body><div class="pagination"><a href="#">«</a><a href="#" class="active-link">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a><a href="#">»</a></div></body></html></pre>Pagination Size
To change the size of pagination links, we can use font-size property. Let see an example:
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; list-style: none; padding: 0; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; border: 2px solid black; font-size: 20px; margin: 2px; } .pagination a.active-link { background-color: violet; color: white; } .pagination a:hover:not(.active-link) { background-color: pink; } </style></head><body><div class="pagination"><a href="#">«</a><a href="#" class="active-link">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a><a href="#">»</a></div></body></html></pre>Centered Pagination
We can use the justify-content CSS property to center pagination links. Here is an example.
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; list-style: none; padding: 0; justify-content: center; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.7s; border: 2px solid black; margin: 2px; } .pagination a.active-link { background-color: violet; color: white; } .pagination a:hover:not(.active-link) { background-color: pink; } </style></head><body><div class="pagination"><a href="#">«</a><a href="#" class="active-link">A</a><a href="#">B</a><a href="#">C</a><a href="#">D</a><a href="#">E</a><a href="#">»</a></div></body></html></pre>Pagination With Next and Previous Buttons
We can add previous and next buttons across pagination links for quicker navigation. Let see an example for this.
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; list-style: none; padding: 0; margin: 10px; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; transition: background-color 0.4s; border: 2px solid black; margin: 2px; } .prev-next{ background-color: grey; } .pagination a.active-link { background-color: violet; color: white; } .pagination a:hover:not(.active-link) { background-color: pink; } </style></head><body><div class="pagination"><a href="#" class="prev-next">< Previous</a><a href="#" class="active-link">Page 1</a><a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#" class="prev-next">Next ></a></div></body></html></pre>Breadcrumb Pagination
Breadcrumb pagination is a navigation method that shows users the path theyve taken to reach their current page. Let's see an example to design breadcrumb pagination.
Example
<!DOCTYPE html><html><head><style>ul.breadcrumb-pagination { padding: 10px; list-style: none; background-color: pink; } ul.breadcrumb-pagination li { display: inline-block; } ul.breadcrumb-pagination li a { color: blue; } ul.breadcrumb-pagination li+li:before { padding: 10px; content: "/\00a0"; } </style></head><body><ul class="breadcrumb-pagination"><li><a href="#">Tutorialspoint</a></li><li><a href="#">CSS Pagination</a></li><li class="active-link">CSS Pagnation With Breadcrumb</li></ul></body></html></pre>Pagination With List
We can also use unordered list (<ul>) and list items (<li>) for creating the pagination. Let see an example.
Example
<!DOCTYPE html><html><head><style>.pagination { display: flex; padding: 0; list-style: none; } .pagination li { margin: 5px; } .pagination a { text-decoration: none; padding: 8px 12px; color: #333; border: 2px solid black; } .pagination a:hover { background-color: pink; } .pagination .active-link { background-color: violet; color: white; } </style></head><body><ul class="pagination"><li><a href="#"></a></li><li><a href="#" class="active-link">A</a></li><li><a href="#">B</a></li><li><a href="#">C</a></li><li><a href="#">D</a></li><li><a href="#">E</a></li><li><a href="#"></a></li></ul></body></html></pre>
Leave a Reply