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 of the 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 is 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're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (CSS3 - Neumorphism Pagination Design).

Video Tutorial of CSS3 - Neumorphism Pagination

As you have seen in the video, this is a pure CSS program. This is simple and easy to create and I hope you've also understood the basic codes behind creating the Neumorphism Pagination. If you're a beginner and you know only HTML & CSS then you can also create this type of pagination but if you know JavaScript then you can take this program at the next level with adding more and advanced features.

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 these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Neumorphism Pagination | CodingNepal</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>

CSS FILE:

@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;
}

Thanks for visiting, Keep visiting.

4 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

UnknownAugust 19, 2020 at 10:16 PM
Hello! I would like to build a registration and login form, and that was to find out if you had a code to do so .. thank you!
Simulation Tech February 23, 2021 at 1:04 PM
Where should I paste the Css Code and Where should I paste the HTML code in Blogger Theme html .....?

Video Tutorial of CSS3 - Neumorphism Pagination

You might like this:

Neumorphism Pagination Design [Source Codes]

Thanks for visiting, Keep visiting.

4 Comments

Post a Comment

About Us

Contact Form