Hello readers, Today in this blog you’ll learn how to create Awesome Pagination Design using only HTML & CSS. Pagination is the method of dividing the contents of a website, into discrete pages. Earlier I have shared a blog on how to create an Active Tab Hover Animation on Menu Icon using HTML CSS. And, now I’m going to create Pagination Design.
Video Tutorial of Pagination Design using HTML CSS
As you have seen the Pagination program in the video. I hope you have understood the codes behind creating this design. As you know, I used only HTML & CSS to create this design so there are no vast codes on this program.
If you like this program (Pagination Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
If you’re a beginner and you know HTML & CSS then you can also create this type of pagination design. But if you know JavaScript well, then you can take this design at the next level.
You might like this:
Pagination Design in HTML CSS [Source Codes]
To create this program (Pagination Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pagination Design | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="title">
Pagination Design
</div>
<p>
Awesome pagination design in HTML and CSS only.
</p>
<ul class="pagination">
<li class="icon"><a href="#">
<span class="fas fa-angle-left"></span>
Previous</a>
</li>
<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>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="icon"><a href="#">
Next<span class="fas fa-angle-right"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
text-align: center;
background: linear-gradient(147deg,#f6b323 0%, #f23b26 74%);
}
::selection{
color: #fff;
background: #f23b26;
}
.container{
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 30px;
box-shadow: 0px .5vh 5px 0px rgba(0,0,0,0.25);
}
.container .title{
font-size: 50px;
font-weight: 600;
}
.container p{
font-size: 19px;
}
.pagination{
margin: 25px 0 15px 0;
}
.pagination,
.pagination li a{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pagination li{
background: #f23b26;
list-style: none;
}
.pagination li a{
text-decoration: none;
color: #fdfdfd;
height: 50px;
width: 50px;
font-size: 18px;
padding-top: 1px;
border: 1px solid rgba(0,0,0,0.25);
border-right-width: 0px;
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.35);
}
.pagination li:last-child a{
border-right-width: 1px;
}
.pagination li a:hover{
background: rgba(255,255,255,0.2);
border-top-color: rgba(0,0,0,0.35);
border-bottom-color: rgba(0,0,0,0.5);
}
.pagination li a:focus,
.pagination li a:active{
padding-top: 4px;
border-left-width:1px;
background: rgba(255,255,255, 0.15);
box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,.25);
}
.pagination li.icon a{
min-width: 120px;
}
.pagination li:first-child span{
padding-right: 8px;
}
.pagination li:last-child span{
padding-left: 8px;
}
That’s all, now you’ve successfully created an Awesome Pagination Design in HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
