In this article, you'll learn how to create a simple pagination design with HTML and CSS in just 5 minutes. This tutorial will guide you to create an attractive pagination that will help you to improve the user experience of your website.
We going to make this simple pagination design using HTML & CSS. Its just the frontend. But I have shared the backend of pagination using php. Which I have made using this frontend or design.
You may have seen pagination in many websites. Pagination is useful when you have so much data to show.
You can initially show limited data and when user need more it can simply go to next page for further data. Like that Pagination also increase website page speed. As if you show all the tons of data into single page then it gets slower on loading.
So, In this blog post we going to make simple design of pagination.
Video Tutorial On Pagination Design In HTML & CSS.
Pagination Design.
File structure:
- index.html
- index.css
Let's create simple pagination design using HTML and CSS.
Step 1: Create basic structure of html.
First create basic structure of html and link css file with link tag.
I have added styles to body tag, for background colour and to make it inner element in centre. See the below css code.
HTML
<!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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background-color: #1a004b;
display: flex;
align-items: center;
justify-content: center;
}
Output :
Step 2: Add numbers and button for pagination.
Now to add the numbers and buttons(previous and next button) I have added one box. And inside it buttons and numbers are added.
HTML
<div class="box">
<button type="button"><a href="#">Prev</a></button>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<button type="button"><a href="#">Next</a></button>
</div>
CSS
.box {
background-color: #fff;
padding: 10px;
border-radius: 200px;
box-shadow: 0px 10px 30px -15px rgb(0 0 0);
display: flex;
align-items: center;
}
.box ul {
display: flex;
margin: 0px 10px;
}
.box ul li {
list-style: none;
margin: 0px 5px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
transition: 0.2s;
}
.box ul li:hover,
.box button:hover {
background-color: #000;
}
.box ul li a {
font-size: 25px;
text-decoration: none;
color: #000;
display: block;
transition: 0.2s;
}
.box ul li a:hover,
.box button a:hover {
color: #fff;
}
.box button {
font-size: 20px;
font-weight: bold;
background-color: #f1f1f1;
border: none;
cursor: pointer;
border-radius: 200px;
transition: 0.2s;
}
.box button a {
text-decoration: none;
padding: 10px 20px;
display: block;
color: #000;
transition: 0.2s;
}
Output :
Step 3: Show the active page in pagination.
Till now the design of pagination is almost completed. But let’s show the active page. Means on which page user is currently on.
So, for that we create another seperate class. See the below css code.
CSS
.box ul .active_li_tag {
background-color: #000;
}
.box ul li .active_a_tag {
color: #fff;
}
Now when this above class(.active_li_tag and .active_a_tag) is added to numbers than it styles get applied to it.
Let's add it to first number.
HTML
<div class="box">
<button type="button"><a href="#">Prev</a></button>
<ul>
<li class="active_li_tag"><a href="#" class="active_a_tag">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<button type="button"><a href="#">Next</a></button>
</div>
Output :
Now let's add it to 3 number.
HTML
<div class="box">
<button type="button"><a href="#">Prev</a></button>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active_li_tag"><a href="#" class="active_a_tag">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<button type="button"><a href="#">Next</a></button>
</div>
Output :
As I said that it just the design. So when you click on any numbers (page numbers) it won’t get active class or show that now this number is active or now user is on this page.
Nor it go to next page or previous page when you click on any of buttons. This can be done on backend. Here is the link of pagination using PHP and MySQL which I have made using this design.
You may also like:
- Login and Registration system using PHP and MySQL.
- Login & Registration system with prepared statement using PHP and MySQL.
- How to create dynamic pagination using HTML, CSS and JavaScript.
Final code:
So that’s it, simple pagination design is ready using HTML and CSS. If you have any questions or suggestions you can write in the comment section.
Share your thoughts.