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 04:23 am GMT

Pagination UI Design Using HTML and CSS

Pagination is a great design that allows you to make different pages of your website much more professional and user friendly. This allows you to split any page or post on your web site into smaller sections. This will make your posts look more professional. This pagination design can be noticed in the case of different types of search engines. For example, in Google or any other search engine, you will see that many results are divided into different small parts. This type of design is currently seen on almost every website. These are very easy and simple to make.
You can create such awesome designs using only HTML and CSS code. The source code required to create it is in the download button below. You can download the completed code by clicking there. The following video tutorial will help you to know the complete step by step method of making pagination.


Demo: Click Here

Download: Click Here

Below I have simply shown how pagination is created using common HTML and CSS code.

First of all, create the buttons using HTML code

First of all, you use the HTML programming code to make the buttons. A small amount of HTML programming code has been used here.

<!-- 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

Design pagination background using CSS code

The following programming codes are CSS programming codes. With the help of which the background of this pagination has been designed and the buttons have been made with different colors. Gradients of blue and pink color have been used in the background.

*,*::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;}
Enter fullscreen mode Exit fullscreen mode

Create the numbers in the button

The code is used to add numbers to the buttons in this pagination. When you watch the demo you will understand that I have used a total of 19 buttons here. It uses its own programming code to make the numbers. In this case, you can add or subtract more numbers as you need.

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

In these three steps, you can easily create the design of this pagination. If you want to know it in full step by step, you can follow the video tutorial above. Hope you like this design and the know-how to make it.

You can comment on this pagination design in the comments.


Original Link: https://dev.to/backlinknweb/pagination-ui-design-using-html-and-css-4eel

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