CSS - Pagination

CSS pagination is a technique for creating page numbers for a website, which allows users to easily navigate between large amounts of content. It is a simple and effective way to organize your website and make it more user-friendly.

Step 1: Add HTML Markup

To create a pagination element in HTML, you can use a <div> or <ul> element. The element will contain links for each page of your content, and optionally "Previous" and "Next" links.

<div class="simple-pagination">
   <a href="#">«</a>
   <a href="#">A</a>
   <a href="#">B</a>
   <a href="#">C</a>
   <a href="#">D</a>
   <a href="#">E</a>
   <a href="#">»</a>
</div>

Step 2: Define CSS Classes

Specify the CSS styles for your pagination, including the display, padding, and list-styles.

.simple-pagination {
   display: flex;
   list-style: none;
   padding: 0;
}

Step 3: Pagination Link Styles

You can style the individual pagination links (the <a> elements) to control their appearance, such as their color, padding, and text decoration.

.simple-pagination a {
   text-decoration: none;
   padding: 12px;
   color: black;
}

CSS Simple Pagination

The following example demonstrates a simple pagination element that is displayed as a flexbox container −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 12px;
      color: black;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Active and Hoverable Pagination

You can create a pagination element with different styles by:

Add .active class to the current page number.
Use :hover selector to change the color of all page links when hovering over them.

Here is an example −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

CSS Rounded Active and Hoverable Buttons

You can create a pagination element with a rounded active and hover button by adding the border-radius CSS property.

Here is an example −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border-radius: 8px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

CSS Hoverable Transition Effect

You can create a pagination element with smooth transitions when hovering over the pagination links using the transition property.

Here is an example −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

CSS Bordered Pagination

When you want to add a border to pagination links, you can use the CSS border property.

Here is an example −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

CSS Rounded Borders

When you want to round the corners of pagination links, you can use the CSS border-radius property.

Here is an example −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:first-child {
      border-top-left-radius: 20px; 
      border-bottom-left-radius: 20px; 
   }
   .simple-pagination a:last-child {
      border-top-right-radius: 20px; 
      border-bottom-right-radius: 20px; 
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

CSS Space Between Links

The following example demonstrates how to use the CSS margin property to create a space around each link in the pagination component −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
      margin: 2px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

The following example demonstrates how to use the CSS column-gap property to create a space around each link in the pagination component −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      column-gap: 2px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

CSS Pagination Size

The following example demonstrates that the font-size property can be used to set the size of the text in a link.

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border: 2px solid blue;
      font-size: 20px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

CSS Centered Pagination

When you want to center the links in the pagination component, you can use the justify-content CSS property.

Here is an example −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      justify-content: center;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-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>

CSS Pagination With Next Previous Buttons

The following example demonstrates a simple pagination component with previous and next buttons −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 10px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#" class="active-link">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">Settings</a>
   </div>
   <div class="simple-pagination">
      <a href="#" class="prev-next">< Previous</a>
      <a href="#" class="prev-next">Next ></a>
   </div>
</body>
</html>

CSS Pagination With Breadcrumb

The following example demonstrates a simple pagination component with previous and next buttons −

<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>

CSS Pagination With List

You can also use unordered list (<ul>) and list items (<li>) for creating the pagination.

Here is an example −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      padding: 0;
      list-style: none;
   }
   .simple-pagination li {
      margin: 5px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border: 2px solid blue;
   }
   .simple-pagination a:hover {
      background-color: pink;
   }
   .simple-pagination .active-link {
      background-color: violet;
      color: white;
   }
</style>
</head>
<body>
   <ul class="simple-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>