An Interest In:
Web News this Week
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
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>
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;}
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 */
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To