Pagination CSS

pagination css codepen
pagination css codepen
pagination css codepen

Hello Friends today in this article we will learn how to create Pagination Using HTML and CSS.

Add Font Awesome CSS In Head Section

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Step-1 Add HTML

<div class="pagi_container">
  <ul class="pagination">
    <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
    <li class="active"><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="#"><i class="fa fa-angle-right"></i></a></li>
  </ul>
</div>

Step-2 Add CSS

body
{
	margin:0px;
	padding:0px;
	background:#333;
}

.pagi_container
{
	margin-left:100px;
	margin-top:100px;
}

.pagination
{
	margin:0px;
	padding:0px;
	list-style:none;
}

.pagination li
{
	float:left;
	padding:15px;
	margin:0px auto;
	border:1px  dashed #f2f2f2;
}

.pagination li a
{
	color:#f60;
	text-decoration:none;
}

.active
{
	background:rgba(0,102,0,1);
	color:#fff;
}

.pagination li:hover
{
	background:#f2f2f2;
}

Leave a Reply

Your email address will not be published. Required fields are marked *