<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.-->
<h2><a href="https://softcodeon.com/tutorials/create-pagination-using-html-and-css.htm">Pagination Using HTML And CSS</a></h2>
<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>

*{
  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;
}
h2 a{
  color:hotpink;
  text-align:center;
  text-decoration:none;
}
.soft-pagination-items li:hover{
background: linear-gradient(120deg, rgba(87,23,171,1) 100%, rgba(246,0,255,1) 10%);
color:#f288cb;
}