M/s VIKASH TECH - Awesome Pagination Design in HTML & CSS
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 websit
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.
In this program (Pagination Design), there is a white pagination container with some texts and a gradient background-color as you have seen in the image. And in the container, there is pagination with the ten buttons. When you click on the particular button there is a box-shadow effect to indicates you a button is clicked or not. This is a pure CSS program that means only HTML & CSS are used to create this Pagination.
If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com
HTML
<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pagination Design | VikashTech</title>
<link rel="stylesheet" href="blog.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</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>
CSS
@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;
}
No comments yet. Login to start a new discussion Start a new discussion