html

			<ul class="pagination">
			  <li><a href="#">&laquo;</a></li>
			  <li><a href="#">1</a></li>			  
			  <li> <a href="#">2</a> </li>
			  <li><a href="#">3</a></li>
			  <li><a href="#">4</a></li>
			  <li><a href="#">5</a></li>
			  <li><a href="#">6</a></li>
			  <li><a href="#">&raquo;</a></li>			  
			</ul>

 

 

 

css

.pagination {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    position: relative;
     justify-content: center;
}
.pagination li {
    height: 40px;
    width: 40px;  

}
.pagination li a {
    /* background: #eee; */
    color: #000;
    /* border-radius: 50%; */
    border: 1px solid #eee; 
    display: block;
    font-size: 14px;
    text-decoration: none;
    outline: none;
    height: inherit;
    line-height: 42px;
    text-align: center;
}
.pagination li a:hover , .pagination li.active a {
    background-color: #764af1;
    color: #ffffff;
}