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.
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.
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.
Pagination Javascript Code
Check out the results below!
See the Pen Pacman pagination by Mikael Ainalem (@ainalem) on CodePen.
Table pagination in HTML
Check out the results below!
See the Pen Pagination by Vineeth.TR (@vineethtrv) on CodePen.
Simple Pagination Javascript
Check out the results below!
See the Pen Flexing pagination arrows by Hakim El Hattab (@hakimel) on CodePen.
HTML Pagination Example
Check out the results below!
See the Pen Pagination by Rosa (@RRoberts) on CodePen.
Web Page Pagination
Check out the results below!
See the Pen Infinite Pagination by Mariusz Dabrowski (@MarioD) on CodePen.
Pagination Design
Check out the results below!
See the Pen Hover and Active Pagination by Doğukan Çavuş (@dgknca) on CodePen.
Pagination In CSS
Check out the results below!
See the Pen Pagination One by Steven Roberts (@matchboxhero) on CodePen.
Pagination Style
Check out the results below!
See the Pen responsive pagination by Milica (@micadev) on CodePen.
CSS Pagination Style
Check out the results below!
See the Pen Spring pagination by Mikael Ainalem (@ainalem) on CodePen.
Pagination JavaScript
Check out the results below!
See the Pen Pagination with morphing numbers by Mikael Ainalem (@ainalem) on CodePen.
Bootstrap Pagination With Dots
Check out the results below!
See the Pen Dot Hopper - Pagination by Elliot Geno (@pyrografix) on CodePen.
Pagination In Jquery Without Plugin
Check out the results below!
See the Pen WebDesignerDepot pagination by Wouter Bles (@wouterbles) on CodePen.
Responsive Pagination
Check out the results below!
See the Pen pagination hover animation by Elena Nazarova (@nazarelen) on CodePen.
Pagination HTML Code
Check out the results below!
See the Pen Gooey Pagination by Lucas Bebber (@lbebber) on CodePen.
Js Pagination
Check out the results below!
See the Pen Pagination by Kasper Mikiewicz (@Idered) on CodePen.
Pagination HTML CSS JavaScript
Check out the results below!
See the Pen SVG Pagination Animation(s) by Adam, Ironclad, Wells (@Adamlwells408) on CodePen.
Pagination In Javascript For HTML Div
Check out the results below!
See the Pen Unrealistic Pagination by Tony Banik (@banik) on CodePen.
Pagination CSS Javascript
Check out the results below!
See the Pen Pagination : Almost Tabs by Mandy McClausky (@mandynicole) on CodePen.
Responsive Pagination HTML CSS
Check out the results below!
See the Pen Responsive Pagination by Tommy Hodgins (@tomhodgins) on CodePen.
Custom Pagination In Javascript
Check out the results below!
See the Pen Responsive Magic Line Pagination by Ryan Yu (@iamryanyu) on CodePen.
Pure CSS3 Responsive Pagination
Check out the results below!
See the Pen Pure CSS3 Responsive Pagination by Béla Varga (@netzzwerg) on CodePen.
Pagination Buttons
Check out the results below!
See the Pen Pagination Buttons by Himalaya Singh (@himalayasingh) on CodePen.
Front End Pagination With Javascript
Check out the results below!
See the Pen SVG Page Hopper by Chris Gannon (@chrisgannon) on CodePen.
Pure CSS pagination
Check out the results below!
See the Pen Pure CSS pagination by Brendan Mullins (@jsnanigans) on CodePen.
Pagination in HTML
Check out the results below!
See the Pen Morphing Pagination by Aaron Iker (@aaroniker) on CodePen.
Responsive pagination
Check out the results below!
See the Pen Material Angular Pagination Demo by Crawlink (@crawlink) on CodePen.
Pagination UI
Check out the results below!
See the Pen Pagination or Navigation Links Application by Himalaya Singh (@himalayasingh) on CodePen.
Html Pagination Code Example
Check out the results below!
See the Pen Line Pagination with Hover (PureCSS) by Mark Mead (@markmead) on CodePen.
HTML Pagination Using Bootstrap
Check out the results below!
See the Pen Pagination by alphardex (@alphardex) on CodePen.
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!
