33 Examples Of Pagination UI Design

33 Examples Of Pagination UI Design


December, 6 2021

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

Create Basic Pagination Using HTML CSS

First we will go into learning how to create basic pagination for websites 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>

The active class is responsible for helping users know which page they are on through the way we set the color for it. And often the color of this class will be different from the rest of the page numbers. To understand better, see the following CSS code!

CSS

/* Set the style for the a tag */
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* set the style for the active class */
.pagination a.active {
background-color: dodgerblue;
color: white;
}
/* add background color when user hovers on inactive class */
.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

Create 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

/* Set the style for the a tag */
.pagination a {
color: black;
float: left;
padding: 12px 18px;
text-decoration: none;
}
/* set the style for the active class */
.pagination a.active {
background-color: dodgerblue;
color: white;
/*Circle Design with CSS*/
border-radius: 50%;
}
/* add background color when user hovers on inactive class */
.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 50%;
}

And the final result you see below:

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

Link

Create Pagination With Li Tag

In this section we will go into learning 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

/*set style for color, position, height... for pagination*/
 .flex {
   width: 400px;
   height: 80px;
   line-height: 80px;
   background-color: #eeeeee;
   position: absolute;
   top: 15%;
   left: 40%;
   margin: -25px 0 0 -150px;
 }
 /*Set style for ul tag*/
 .flex ul {
   display: flex;
   padding: 0;
   margin: 0;
   box-shadow: 0 10px 20px 0 #cccccc;
 }
 /*Set style for li tag*/
 .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;
 }
 /*create hover effect for li tag */
 .flex ul li:hover {
   background-color: rgba(255, 255, 255, 0.25);
   color: #65bcc9;
 }
 /*toggle the position of the class bar when the user hovers over the numbers*/
 .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%;
 }
 /*set style for 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 see below:

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

Link

Pagination Javascript Code

Pagination Javascript Code

Check out the results below!

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

Link

Table pagination in HTML

Check out the results below!

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

Link

Simple Pagination Javascript

Simple Pagination Javascript

Check out the results below!

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

Link

HTML Pagination Example

HTML Pagination Example

Check out the results below!

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

Link

Web Page Pagination

Web Page Pagination

Check out the results below!

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

Link

Pagination Design

Pagination Design

Check out the results below!

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

Link

Pagination In CSS

Pagination In CSS

Check out the results below!

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

Link

Pagination Style

Pagination Style

Check out the results below!

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

Link

CSS Pagination Style

CSS Pagination Style

Check out the results below!

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

Link

Pagination JavaScript

 Pagination JavaScript

Check out the results below!

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

Link

Bootstrap Pagination With Dots

Bootstrap Pagination With Dots

Check out the results below!

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

Link

Pagination In Jquery Without Plugin

 Pagination In Jquery Without Plugin

Check out the results below!

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

Link

Responsive Pagination

 Responsive Pagination

Check out the results below!

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

Link

Pagination HTML Code

Pagination HTML Code

Check out the results below!

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

Link

Js Pagination

  Js Pagination

Check out the results below!

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

Link

Pagination HTML CSS JavaScript

Pagination HTML CSS JavaScript

Check out the results below!

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

Link

Pagination In Javascript For HTML Div

 Pagination In Javascript For HTML Div

Check out the results below!

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

Link

Pagination CSS Javascript

Pagination CSS Javascript

Check out the results below!

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

Link

Responsive Pagination HTML CSS

 Responsive Pagination HTML CSS

Check out the results below!

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

Link

Custom Pagination In Javascript

Custom Pagination In Javascript

Check out the results below!

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

Link

Pure CSS3 Responsive Pagination

Pure CSS3 Responsive Pagination

Check out the results below!

See the Pen Pure CSS3 Responsive Pagination by Béla Varga (@netzzwerg) on CodePen.

Link

Pagination Buttons

Pagination Buttons

Check out the results below!

See the Pen Pagination Buttons by Himalaya Singh (@himalayasingh) on CodePen.

Link

Front End Pagination With Javascript

Front End Pagination With Javascript

Check out the results below!

See the Pen SVG Page Hopper by Chris Gannon (@chrisgannon) on CodePen.

Link

Pure CSS pagination

Pure CSS pagination

Check out the results below!

See the Pen Pure CSS pagination by Brendan Mullins (@jsnanigans) on CodePen.

Link

Pagination in HTML

Pagination in HTML

Check out the results below!

See the Pen Morphing Pagination by Aaron Iker (@aaroniker) on CodePen.

Link

Responsive pagination

Responsive pagination

Check out the results below!

See the Pen Material Angular Pagination Demo by Crawlink (@crawlink) on CodePen.

Link

Pagination UI

Pagination UI

Check out the results below!

See the Pen Pagination or Navigation Links Application by Himalaya Singh (@himalayasingh) on CodePen.

Link

Html Pagination Code Example

Html Pagination Code Example

Check out the results below!

See the Pen Line Pagination with Hover (PureCSS) by Mark Mead (@markmead) on CodePen.

Link

HTML Pagination Using Bootstrap

HTML Pagination Using Bootstrap

Check out the results below!

See the Pen Pagination by alphardex (@alphardex) on CodePen.

Link

Summary

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