How To Create Pagination And 30 Pagination Examples For Websites
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!
<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
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}And the final result you see below:
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
.pagination a {
color: black;
float: left;
padding: 12px 18px;
text-decoration: none;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
/*Thiết kế hình tròn With CSS*/
border-radius: 50%;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 50%;
}And the final result you can see below:
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
.flex {
width: 400px;
height: 80px;
line-height: 80px;
background-color: #eeeeee;
position: absolute;
top: 15%;
left: 40%;
margin: -25px 0 0 -150px;
}
.flex ul {
display: flex;
padding: 0;
margin: 0;
box-shadow: 0 10px 20px 0 #cccccc;
}
.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;
}
.flex ul li:hover {
background-color: rgba(255, 255, 255, 0.25);
color: #65bcc9;
}
.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%;
}
.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:
Pagination Javascript
See the results below!
Pagination HTML CSS
See the results below!
Pagination CSS3 Javascript
See the results below!
Pagination CSS
See the results below!
Pagination With SVG
See the results below!
Pagination Jquery
See the results below!
CSS Pagination
See the results below!
Pagination
See the results below!
Animation Pagination
See the results below!
Pagination HTML5
See the results below!
Pagination With GSAP
See the results below!
Jquery Pagination
See the results below!
Responsive Pagination
See the results below!
Hover Pagination
See the results below!
Pagination By Jquery
See the results below!
Pagination With SVG
See the results below!
Pagination Jquery CSS3
See the results below!
Pagination CSS Javascript
See the results below!
Responsive Pagination HTML CSS
See the results below!
Responsive Pagination Jquery Cho Website
See the results below!
Pure CSS3 Responsive Pagination
See the results below!
Pagination Buttons
See the results below!
SVG Pagination
See the results below!
Pure CSS pagination
See the results below!
Morphing Pagination
See the results below!
Material Angular Paging demo
See the results below!
Pagination UI
See the results below!
Line Pagination with Hover (PureCSS)
See the results below!
Pagination HTML Bootstrap
See the results below!
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!
