Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 10, 2021 03:56 pm GMT

Amazing Pagination Design Using Only HTML & CSS

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.

Demo: Click Here

Download: Click Here

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

section of the HTML file.
*,*::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 */
Enter fullscreen mode Exit fullscreen mode

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.


Original Link: https://dev.to/monalishamondol/amazing-pagination-design-using-only-html-css-7gf

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To