Hello, in this article I am going to show you how to create pagination very easily using only simple HTML and CSS programming code. With the help of pagination, you can divide any big page of the website into small parts. As a result, your page looks a lot more professional. You can use high-level programming code to create this type of design. However, in this article, I have shown you the easiest way. I used HTML programming code to build it and CS programming code to design it. The design of this beautiful pagination has been made using only 3 kb code.
You can watch the live demo using the demo button above. Also, if necessary, use the download button above to download the code directly. Below I show how I made this design.
Create an HTML and CSS file
To create it, you first need to create an HTML and CSS file. Then copy and paste the programming code below into the HTML file. Make sure you attach your CSS file to the HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Pagination Using Html and Css</title>
<link rel="stylesheet" href="Pagination.css">
</head>
<body>
Add Html code
</body>
</html>
Add HTML Code
The following programming codes are the HTML programming codes used to create this pagination. In this case, a very small amount of HTML code has been used only to create the buttons here. Copy the following programming codes then paste the following codes in the structure above where the add HTML code is written.
<!-- Html Code-->
<div class="container xlarge">
<div class="pagination">
<ul>
<!-- Add Button-->
<li><a href="#"></a></li>
<!-- For 19 button-->
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li class="active"><a href="#"></a></li><!-- for active button-->
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<!-- total 19 button-->
</ul>
</div>
</div>
CSS Code
The following programming codes are the CSS programming codes that play the most significant role in creating this pagination. Everything here is controlled by CSS programming code. CSS programming code has also been used to design and create buttons, starting with background-color.
Copy and paste the CSS programming codes below into your CSS file. You can also paste these codes using style tags in the
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
color: #fff;
margin-top:150px;
background: #949c4e;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
min-height: 100vh;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: #fdfdfd;
padding: 1rem;
margin: 3rem auto;
border-radius: 0.2rem;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
counter-reset: pagination;
text-align: center;
}
.container:after {
clear: both;
content: "";
display: table;
}
.container ul {
width: 100%;
}
.xlarge {
width: 65rem;
}
ul, li {
list-style: none;
display: inline;
padding-left: 0px;
}
li {
counter-increment: pagination;
}
li:hover a {
color: #fdfdfd;
background-color: #1d1f20;
border: solid 1px #1d1f20;
}
li.active a {
color: #fdfdfd;
background-color: #1d1f20;
border: solid 1px #1d1f20;
}
li:first-child {
float: left;
}
li:first-child a:after {
content: "Previous";
}
li:nth-child(2) {
counter-reset: pagination;
}
li:last-child {
float: right;
}
li:last-child a:after {
content: "Next";
}
li a {
border: solid 1px #d7d7d7;
border-radius: 0.2rem;
color: #7d7d7d;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
text-align: center;
padding: 0.5rem 0.9rem;
}
li a:after {
content: " " counter(pagination) " ";
}
/* that's all */
I have designed this pagination using the above two types of code. If you want to know how to make it completely, you can definitely follow the video tutorial above. In that video, I have shown you step by step the programming code used to create an element.
Hopefully, you have learned how to make this design from this tutorial. If there is any problem in making this design, you can let me know by commenting.
Top comments (0)