How to Create Pagination using HTML and CSS

Create Pagination using HTML and CSS. So, In this article, I will show you how to add pagination, an attractive way to operate large amounts of content, to your website using HTML and CSS. Pagination provides you to make large amounts of sections easy to find and breaks up various entries or web sections into multiple pages, providing you to toggle through content with ease.

To create pagination for a web page is really simple, you can do that by using the simplest way which is HTML and CSS. Pagination is important when the website holds lots of content on a particular page, and a particular page will not look excellent with all those topics together. Several websites use the scroll to avoid pagination and clamp versa. But the best attention comes with the sequence of scroll and pagination.

As a developer, you can put some content on a page to make that page a little scrollable until it’s irritating. After that, you can use pagination that will drop those previous content and proceed to the new content page but the topic will be the same or can be changed.

Below is the HTML and CSS is required to build pagination to your website.

Create Pagination using HTML and CSS

HTML CODE:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--This cdns used for next pre icons.-->
<div class="soft-pagination">
    <ul class="soft-pagination-items">
      <li> <i class="fa fa-chevron-circle-left" style="font-size:20px;color:white"></i></li>
        <li >1</li>
        <li>2</li>
        <li class="active">3</li>
        <li>4</li>
        <li>5</li>
       <li> <i class="fa fa-chevron-circle-right" style="font-size:20px;color:white;"></i></li>
    </ul>
</div>

CSS CODE:

<style>
*{margin:0;padding:0;}
.soft-pagination{
text-align:center;
background: rgb(87,23,171);
background: linear-gradient(90deg, rgba(87,23,171,1) 0%, rgba(246,0,255,1) 100%);
margin-top:350px;width:100%;
-webkit-box-shadow: 1px 7px 14px 0px rgba(189,178,189,1);
-moz-box-shadow: 1px 7px 14px 0px rgba(189,178,189,1);
box-shadow: 1px 7px 14px 0px rgba(189,178,189,1);  
}
.soft-pagination-items{
color: #ffffff;cursor: pointer; 
}
.soft-pagination-items li{
display: inline-block;
padding: 15px 25px;font-weight: 800;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.soft-pagination-items li.active{
background:  #77f2de; color:#000;
}
.soft-pagination-items li:hover{
background: linear-gradient(120deg, rgba(87,23,171,1) 100%, rgba(246,0,255,1) 10%);
color:#f288cb;
}</style>

You need to copy the above HTML and CSS code and paste it where you want to add pagination. It will look excellent. We hope this post helped you to create pagination for your web page. If you face any problems leave a comment.

Create Pagination using HTML and CSS

Leave a Reply Cancel reply