CSS3 – Neumorphism Pagination Design

Hello readers, Today in this blog you’ll learn how to create a CSS3 Neumorphism Pagination using only HTML & CSS. Earlier I have also shared a blog on Simple Pagination Design using HTML & CSS. But now I’m going to create Neumorphism Pagination Design.

Pagination is the process of splitting the contents of a website, or a part of contents from a website, into discrete pages. Pagination is helpful when the website includes lots of content on a single page, that a single page will not look good with all those topics together. Nowadays, Neumorphism design is a trend and most websites are based on this neomorphic effect.

In this program (CSS3 – Neumorphism Pagination Design), at first, there is pagination on the webpage and when you click on each button there is shown a neomorphic shadow effect which indicates to the user that this tab is currently active. This pagination design is simple and there are no advanced features because this is a pure CSS program and I didn’t use JavaScript but I used jQuery to make pagination buttons clickable.

If you like this program (Neumorphism 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. You can use this program on your projects and HTML pages.

Neumorphism Pagination Design [Source Codes]

To create this program (Neumorphism 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.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Neumorphism Pagination | kishanhharb</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
   </head>
   <body>
      <div class="container">
         <ul class="pagination">
            <li><a href="#">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="#">Next</a></li>
         </ul>
      </div>
      <script>
         $("li").click(function(){
           $(this).addClass("active").siblings().removeClass("active");
         });
      </script>
   </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;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #dde1e7;
}
.container{
  background: #dde1e7;
  padding: 25px;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
.pagination{
  display: flex;
  list-style: none;
}
.pagination li{
  flex: 1;
  margin: 0px 5px;
  background: #dde1e7;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
               3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li a{
  font-size: 18px;
  text-decoration: none;
  color: #4D3252;
  height: 45px;
  width: 55px;
  display: block;
  line-height: 45px;
}
.pagination li:first-child a{
  width: 120px;
}
.pagination li:last-child a{
  width: 100px;
}
.pagination li.active{
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li.active a{
  font-size: 17px;
  color: #6f6cde;
}
.pagination li:first-child{
  margin: 0 15px 0 0;
}
.pagination li:last-child{
  margin: 0 0 0 15px;
}

That’s all, now you’ve successfully created a CSS3 – Neumorphism Pagination Design. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Flipping Card UI Design in HTML & CSS

Hey buddy, I hope you are doing are creating an exciting project. Today I have brought a beautiful project for you. Bascially today you will learn to create a Card with Flipping Animation in HTML CSS and JavaScript. A card is a section that can be square or rectangular and contains some vital information about a particular. Cards can be in various types like profile cards, product cards,s and the least goes on. Take a look at the given image of our project [Flipping Card UI Design]. As you can see there are two beautiful gradients two balls and between them, there is a card with grassmorphism UI. In the card, there is a master card logo, chip, and some card owner details like card number, name, and the valid date of the card. The interesting part of this project is when you hover over the card it will flid and the back side of the card visible. On the back side of that card, I have added some other information as well. Githup Code Demo Live Demo

Project

Search This Blog