M/s VIKASH TECH - We Write Imaginations to Codes..!!

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 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;
}
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

Templates - In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these…

%d bloggers like this: