Menu
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Menu
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

How to create Trendy Pagination with HTML & CSS

/ HTML & CSS / By

Pagination is a technique utilized in websites and applications to segment content into distinct pages, particularly when there is an excessive amount of information to display at once. It is frequently found in blogs, product catalogs, search results, and data tables.

For instance, rather than presenting 100 search results on a single page, the system will show 10 results per page, enabling the user to navigate through options like “Next,” “Previous,” or specific page numbers.

Use our in-depth tutorial to learn how to implement pagination in HTML with ease. For a sophisticated design, use only CSS; JavaScript is not required.

Pagination enhances user experience By dividing content into manageable sections which is a crucial element of web design. We will explore how to create a simple, visually appealing pagination system using just HTML and CSS in this article.

  • HTML CODE

To begin, we will initially need to set up a simple HTML file. Within this file, we will incorporate the essential framework for our pagination. 

After HTML file creation, simply insert the following code into your document. Be sure to save your HTML file with a .html extension to ensure it displays correctly in a web browser.

Copy Text 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Pagination | Coding Jasim</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <input type="radio" name="page" id="page1-input" checked>
  <input type="radio" name="page" id="page2-input">
  <input type="radio" name="page" id="page3-input">
  <input type="radio" name="page" id="page4-input">
  <input type="radio" name="page" id="page5-input">
  <div class="page-wrap">
    <div class="cont">
      <div class="page page1">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="page page2">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="page page3">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="page page4">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="page page5">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
    <div class="navigation">
      <div class="nav-wrapper">
        <div class="arrow arrow-left">
          <span><</span>
          <label for="page1-input"></label>
          <label for="page2-input"></label>
          <label for="page3-input"></label>
          <label for="page4-input"></label>
          <label for="page5-input"></label>
        </div>
        <label class="nav-item nav-page1" for="page1-input">
          <div>1</div>
        </label>
        <label class="nav-item nav-page2" for="page2-input">
          <div>2</div>
        </label>
        <label class="nav-item nav-page3" for="page3-input">
          <div>3</div>
        </label>
        <label class="nav-item nav-page4" for="page4-input">
          <div>4</div>
        </label>
        <label class="nav-item nav-page5" for="page5-input">
          <div>5</div>
        </label>
        <div class="arrow arrow-right">
          <span>></span>
          <label for="page1-input"></label>
          <label for="page2-input"></label>
          <label for="page3-input"></label>
          <label for="page4-input"></label>
          <label for="page5-input"></label>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
  • CSS CODE
Copy Text 
body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  margin: 0;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: border-box;
}

input {
  display: none;
  opacity: 0;
  height: 0;
  width: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fbfbfb;
  padding: 40px;
  height: 100vh;
  width: 100vw;
  box-shadow: 0 0 120px -50px #ff00004d inset;
}

.cont {
  position: relative;
  background-color: #0998b8;
  height: calc(100% - 60px);
  width: 100%;
  max-width: 991px;
}

.page {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 20px;
  left: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}

.page .item {
  background-color: #d7d7d7;
  box-shadow: 0 0 15px -12px rgb(0 0 0 / 21%), 0 0 30px -21px rgb(61 14 14 / 44%) inset;
  height: calc((100% - 20px) / 2);
  width: calc((100% - 40px) / 3);
  margin-right: 20px;
  margin-bottom: 20px;
  opacity: 0;
  pointer-events: none;
  border-radius: 10px;
  z-index: 1;
}

.page1 .item {
  background-color: #d6e9d6;
}

.page2 .item {
  background-color: #e9d6d6;
}

.page3 .item {
  background-color: #d6e0e9;
}

.page4 .item {
  background-color: #e5d6e9;
}

.page5 .item {
  background-color: #e9e7d6;
}

.page .item.item:nth-child(3n) {
  margin-right: 0;
}

.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /*background-color: rgb(231, 231, 231);*/
  background-color: #000000;
  height: 60px;
  padding: 10px 60px;
  width: 100%;
  max-width: 991px;
  box-shadow: 0 0 3px -7px black inset;
  user-select: none;
}

.nav-wrapper {
  display: flex;
}

.nav-wrapper .nav-item div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f3f3f3;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.322), 0 0 2px #000000, 0 0 2px #000000, 0 0 1px #000000, 0 0 1px #000000, 0 0 1px #000000, 0 0 1px #000000;
  height: 36px;
  width: 36px;
  background-color: #626fbf;
  border-radius: 50%;
  margin: 0 6px;
  font-weight: 600;
  transition: background-color 0.21s cubic-bezier(0.23, 1, 0.320, 1);
}

.navigation:before {
  content: '';
  position: absolute;
  background-color:rgb(245, 229, 5);
  border-radius: 50%;
  height: 80px;
  width: 78px;
  left: 0;
  top: -10px;
  right: 0;
  margin: 0 auto;
}

.navigation .nav-item {
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.navigation .nav-item div {
  transition: background-color 0.130s ease-out;
}

.navigation .nav-item:hover div,
.navigation .arrow:hover {
  background-color: rgb(33, 180, 190);
}

.navigation .arrow {
  background-color: rgb(238, 8, 203);
  color: #ffffff;
  position: absolute;
  height: 60px;
  width: 60px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.21s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: 1;
}

.navigation .arrow span {
  transform: scale(1, 1.82);
  font-weight: 600;
  font-size: 17px;
  text-shadow: 0 0 1px #000000;
}

.navigation .arrow label {
  height: 100%;
  width: 100%;
  position: absolute;
  cursor: pointer;
  left: 0;
}

.navigation .arrow-left {
  left: 0;
}

.navigation .arrow-right {
  right: 0;
}

#page1-input:checked ~ .page-wrap .nav-page1 div,
#page2-input:checked ~ .page-wrap .nav-page2 div,
#page3-input:checked ~ .page-wrap .nav-page3 div,
#page4-input:checked ~ .page-wrap .nav-page4 div,
#page5-input:checked ~ .page-wrap .nav-page5 div {
  background-color: #38448d;
  transform: scale(1.06);
}

.blocker {
  position: absolute;
  background: red;
  opacity: 0.5;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.page .item:nth-child(1) {
  animation: hidePageItem1 0.86s forwards;
  opacity: 1;
}

@keyframes hidePageItem1 {
  0% {
    transform: none
  } 48% {
    background-color: white;
  } 100% {
    transform: skew(8deg, 10deg) rotate(-40deg) translate(-80%, 150%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(2) {
  animation: hidePageItem2 0.86s 0.09s forwards;
  opacity: 1;
}

@keyframes hidePageItem2 {
  0% {
    transform: none
  } 48% {
    background-color: white;
  } 100% {
    transform:  translate(0, 150%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(3) {
  animation: hidePageItem3 0.86s 0.18s forwards;
  opacity: 1;
}

@keyframes hidePageItem3 {
  0% {
    transform: none;
  } 48% {
    background-color: white;
  } 100% {
    transform: skew(-8deg, -10deg) rotate(40deg) translate(80%, 150%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(4) {
  animation: hidePageItem4 0.86s 0.27s forwards;
  opacity: 1;
}

@keyframes hidePageItem4 {
  0% {
    transform: none;
  } 48% {
    background-color: white;
  } 100% {
    transform: skew(8deg, 10deg) rotate(-40deg) translate(0, 75%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(5) {
  animation: hidePageItem5 0.86s 0.36s forwards;
  opacity: 1;
}

@keyframes hidePageItem5 {
  0% {
    transform: none;
  } 48% {
    background-color: white;
  } 100% {
    transform:  translate(0, 75%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

.page .item:nth-child(6) {
  animation: hidePageItem6 0.86s 0.45s forwards;
  opacity: 1;
}

@keyframes hidePageItem6 {
  0% {
    transform: none;
  } 48% {
    background-color: white;
  } 100% {
    transform: skew(-8deg, -10deg) rotate(40deg) translate(0, 75%) scale(0.12);
    background-color: white;
    opacity: 0;
  }
}

#page1-input:checked ~ .page-wrap .page1 .item,
#page2-input:checked ~ .page-wrap .page2 .item,
#page3-input:checked ~ .page-wrap .page3 .item,
#page4-input:checked ~ .page-wrap .page4 .item,
#page5-input:checked ~ .page-wrap .page5 .item {
  opacity: 0;
  pointer-events: initial;
  z-index: 0;
  animation: showPageItem 0.38s forwards
}

@keyframes showPageItem {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  } 88% {
    opacity: 1;
  } 100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

#page1-input:checked ~ .page-wrap .page1 .item:nth-child(1),
#page2-input:checked ~ .page-wrap .page2 .item:nth-child(1),
#page3-input:checked ~ .page-wrap .page3 .item:nth-child(1),
#page4-input:checked ~ .page-wrap .page4 .item:nth-child(1),
#page5-input:checked ~ .page-wrap .page5 .item:nth-child(1) {
  animation-delay: 0.45s;
}

#page1-input:checked ~ .page-wrap .page1 .item:nth-child(2),
#page2-input:checked ~ .page-wrap .page2 .item:nth-child(2),
#page3-input:checked ~ .page-wrap .page3 .item:nth-child(2),
#page4-input:checked ~ .page-wrap .page4 .item:nth-child(2),
#page5-input:checked ~ .page-wrap .page5 .item:nth-child(2) {
  animation-delay: 0.52s;
}

#page1-input:checked ~ .page-wrap .page1 .item:nth-child(3),
#page2-input:checked ~ .page-wrap .page2 .item:nth-child(3),
#page3-input:checked ~ .page-wrap .page3 .item:nth-child(3),
#page4-input:checked ~ .page-wrap .page4 .item:nth-child(3),
#page5-input:checked ~ .page-wrap .page5 .item:nth-child(3) {
  animation-delay: 0.59s;
}

#page1-input:checked ~ .page-wrap .page1 .item:nth-child(4),
#page2-input:checked ~ .page-wrap .page2 .item:nth-child(4),
#page3-input:checked ~ .page-wrap .page3 .item:nth-child(4),
#page4-input:checked ~ .page-wrap .page4 .item:nth-child(4),
#page5-input:checked ~ .page-wrap .page5 .item:nth-child(4) {
  animation-delay: 0.66s;
}

#page1-input:checked ~ .page-wrap .page1 .item:nth-child(5),
#page2-input:checked ~ .page-wrap .page2 .item:nth-child(5),
#page3-input:checked ~ .page-wrap .page3 .item:nth-child(5),
#page4-input:checked ~ .page-wrap .page4 .item:nth-child(5),
#page5-input:checked ~ .page-wrap .page5 .item:nth-child(5) {
  animation-delay: 0.73s;
}

#page1-input:checked ~ .page-wrap .page1 .item:nth-child(6),
#page2-input:checked ~ .page-wrap .page2 .item:nth-child(6),
#page3-input:checked ~ .page-wrap .page3 .item:nth-child(6),
#page4-input:checked ~ .page-wrap .page4 .item:nth-child(6),
#page5-input:checked ~ .page-wrap .page5 .item:nth-child(6) {
  animation-delay: 0.8s;
}

.page-wrap .navigation .arrow label {
  display: none;
}

#page1-input:checked ~ .page-wrap .navigation .arrow-right label[for="page2-input"] {
  display: block;
}

#page2-input:checked ~ .page-wrap .navigation .arrow-left label[for="page1-input"],
#page2-input:checked ~ .page-wrap .navigation .arrow-right label[for="page3-input"] {
  display: block;
}

#page3-input:checked ~ .page-wrap .navigation .arrow-left label[for="page2-input"],
#page3-input:checked ~ .page-wrap .navigation .arrow-right label[for="page4-input"] {
  display: block;
}

#page4-input:checked ~ .page-wrap .navigation .arrow-left label[for="page3-input"],
#page4-input:checked ~ .page-wrap .navigation .arrow-right label[for="page5-input"] {
  display: block;
}

#page5-input:checked ~ .page-wrap .navigation .arrow-left label[for="page4-input"] {
  display: block;
}

@media (max-width: 480px) {
  .navigation .arrow {
    display: none;
  }
}
Scroll to Top