How to create pagination with css and html

How to create pagination with css and html

- August 08, 2020

Creating pagination with css and html

We will create a beautifull pagination with html and css .

It will have active pagination. It is very responsive .

Here is the pagination

1
2
3
4
5
6
7
8
9

Here is the code

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

.pagination-container
{
text-align :center ;
}
.pagination
{
margin:0;
padding :0;
display :inline-block ;
}
.pagination li
{
list-style-type :none;
display :inline-block ;

}
.pagination li a
{
width :30px ;
display :block ;
height :30px ;
line-height :30px;
border:1px solid #ddd ;
display :block ;
text-align :center ;
text-decoration :none ;
color:#222;
border-radius :30px;
transition :1s;
}
.pagination li a:hover
{
background :#1565C0 ;
color:#fff;
border-color:#1565C0 ;
}
.pagination .active
{
background :#1565C0 ;
color:#fff;
border-color:#1565C0
}
</style>
</head>
<body>

<ul class="pagination">
<li><a href="#" >1</a></li>
<li><a href="#" >2</a></li>
<li><a href="#" >3</a></li>
<li><a href="#" class="active">4</a></li>
<li><a href="#" >5</a></li>
<li><a href="#" >6</a></li>
<li><a href="#" >7</a></li>
<li><a href="#" >8</a></li>
<li><a href="#" >9</a></li>




</body>
</html>

Comments