I have no talent at all. I am only passionate about understanding

Article

How To Create Pagination And 20 Pagination Examples For Websites

How To Create Pagination And 20 Pagination Examples For Websites


September, 12 2021

When a website you have many products or articles, pagination is a very important task important. It speeds up page loading as well as makes it easier for users to follow your content on the Web. Now let's go to learn how to design pagination using HTML, CSS and Javascript for the website!

How to Create Basic Pagination Using HTML CSS

First we will learn how to create basic pagination for web pages using HTML and CSS!

HTML

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

Class active is responsible for helping users know which page they are in through the color you set for it. And usually the color of this class will be different from the other page numbers . To understand better, see the following CSS code!

CSS

/* thiết lập style cho thẻ a */
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}
/* thiết lập style cho class active */
.pagination a.active {
  background-color: dodgerblue;
  color: white;
}
/* thêm màu nền khi người dùng hover vào class không active */
.pagination a:hover:not(.active) {
  background-color: #ddd;
}

And the final result you see below:

See the Pen Pagination cơ bản by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

How to Create a Pagination Border Using HTML CSS

As you can see in the above example, our active class has a rectangular shape. In this part I will show you how to create pagination with circles!

HTML

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

CSS

/* thiết lập style cho thẻ a */
 .pagination a {
   color: black;
   float: left;
   padding:  12px 18px;
   text-decoration: none;
 }
/* thiết lập style cho class active */
 .pagination a.active {
   background-color: dodgerblue;
   color: white;
   /*Thiết kế hình tròn With CSS*/
   border-radius: 50%;
 }
/* thêm màu nền khi người dùng hover vào class không active */
 .pagination a:hover:not(.active) {
   background-color: #ddd;
   /*Thiết kế hình tròn With CSS*/
   border-radius: 50%;
 }

And the final result you can see below:

See the Pen pagination With hình tròn by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

How to create a pagination with li

In this section we will learn how to create a page section from the li tag!

HTML

<div class="flex">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <div class="bar"></div>
  </ul>
</div>

CSS

/*thiết lập style cho màu sắc, vị trí, độ cao... cho pagination*/
.flex {
  width: 400px;
  height: 80px;
  line-height: 80px;
  background-color: #eeeeee;
  position: absolute;
  top: 15%;
  left: 40%;
  margin: -25px 0 0 -150px;
}
/*Thiết lập style cho thẻ ul*/
.flex ul {
  display: flex;
  padding: 0;
  margin: 0;
  box-shadow: 0 10px 20px 0 #cccccc;
}
/*thiết lập style cho thẻ li*/
.flex ul li {
  flex: 1;
  list-style: none;
  text-align: center;
  position: relative;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s ease;
  cursor: pointer;
  user-select: none;
}
/*tạo hiệu ứng hover cho thẻ li */
.flex ul li:hover {
  background-color: rgba(255, 255, 255, 0.25);
  color: #65bcc9;
}
/*chuyển đổi vị trí của class bar khi người dùng hover vào các con số*/
.flex ul li:hover:nth-of-type(2) ~ .bar {
  left: 20%;
}
.flex ul li:hover:nth-of-type(3) ~ .bar {
  left: 40%;
}
.flex ul li:hover:nth-of-type(4) ~ .bar {
  left: 60%;
}
.flex ul li:hover:nth-of-type(5) ~ .bar {
  left: 80%;
}
/*thiết lập style cho class bar*/
.flex ul .bar {
  width: 20%;
  background-color: dodgerblue;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.3s ease;
}

And the final result you can see below:

See the Pen pagination vởi thẻ li by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Pagination Javascript

Pagination Javascript

See the results below!

See the Pen Pacman pagination by Mikael Ainalem (@ainalem) on CodePen.

Link

Pagination HTML CSS

See the results below!

See the Pen Pagination by Vineeth.TR (@vineethtrv) on CodePen.

Link

Pagination CSS3 Javascript

Pagination CSS3 Javascript

See the results below!

See the Pen Flexing pagination arrows by Hakim El Hattab (@hakimel) on CodePen.

Link

Pagination CSS

Pagination CSS

See the results below!

See the Pen Pagination by Rosa (@RRoberts) on CodePen.

Link

Pagination With SVG

Pagination With SVG

See the results below!

See the Pen Infinite Pagination by Mariusz Dabrowski (@MarioD) on CodePen.

Link

Pagination Jquery

Pagination Jquery

See the results below!

See the Pen Hover and Active Pagination by Doğukan Çavuş (@dgknca) on CodePen.

Link

CSS Pagination

 CSS Pagination

See the results below!

See the Pen Pagination One by Steven Roberts (@matchboxhero) on CodePen.

Link

Pagination

 Pagination

See the results below!

See the Pen responsive pagination by Milica (@micadev) on CodePen.

Link

Animation Pagination

 Animation cho Pagination

See the results below!

See the Pen Spring pagination by Mikael Ainalem (@ainalem) on CodePen.

Link

Pagination HTML5

 Pagination HTML5

See the results below!

See the Pen Pagination with morphing numbers by Mikael Ainalem (@ainalem) on CodePen.

Link

Pagination With GSAP

Pagination With GSAP

See the results below!

See the Pen Dot Hopper - Pagination by Elliot Geno (@pyrografix) on CodePen.

Link

Jquery Pagination

 Jquery Pagination

See the results below!

See the Pen WebDesignerDepot pagination by Wouter Bles (@wouterbles) on CodePen.

Link

Responsive Pagination

 Responsive Pagination

See the results below!

See the Pen pagination hover animation by Elena Nazarova (@nazarelen) on CodePen.

Link

Hover Pagination

Hover Cho Pagination

See the results below!

See the Pen Gooey Pagination by Lucas Bebber (@lbebber) on CodePen.

Link

Pagination By Jquery

 Pagination By Jquery

See the results below!

See the Pen Pagination by Kasper Mikiewicz (@Idered) on CodePen.

Link

Pagination With SVG

 Pagination With SVG

See the results below!

See the Pen SVG Pagination Animation(s) by Adam, Ironclad, Wells (@Adamlwells408) on CodePen.

Link

Pagination Jquery CSS3

 Pagination Jquery CSS3

See the results below!

See the Pen Unrealistic Pagination by Tony Banik (@banik) on CodePen.

Link

Pagination CSS Javascript

Pagination CSS Javascript

See the results below!

See the Pen Pagination : Almost Tabs by Mandy McClausky (@mandynicole) on CodePen.

Link

Responsive Pagination HTML CSS

 Responsive Pagination HTML CSS

See the results below!

See the Pen Responsive Pagination by Tommy Hodgins (@tomhodgins) on CodePen.

Link

Responsive Pagination Jquery Cho Website

 Responsive Pagination Jquery Cho Website

See the results below!

See the Pen Responsive Magic Line Pagination by Ryan Yu (@iamryanyu) on CodePen.

Link

Summary:

Through this, I hope the article will provide you with useful pagination for development, website and if you have any questions just send an email I will respond as soon as possible. Hope you continue Please support the website so that I can write more good articles. Have a nice day!