Simple CSS pagination | 3 Type Of Simple Html CSS pagination
Welcome🎉 to Code With Random blog. We learn how to create a Simple Html CSS pagination in this blog. We use HTML & CSS for Simple Html CSS pagination. Hope you enjoy our blog so let’s start with a basic HTML structure for the Simple Html CSS pagination.
HTML code
<div id="wrapper">
<!-- start simple pagination -->
<div class="page-header">Simple CSS pagination</div>
<ul id="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="">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="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
<!--Active and Hoverable Pagination-->
<div class="page-header">Active and Hoverable Pagination</div>
<ul id="pagination">
<li><a class="" href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">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="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
<!--Bordered Pagination-->
<div class="page-header">Bordered Pagination</div>
<div class="b-pagination-outer">
<ul id="border-pagination">
<li><a class="" href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">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="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div><!--wrapper-->
There is all HTML code for the Simple Html CSS pagination. Now, you can see output without CSS, then we write CSS for the Simple Html CSS pagination.
html,
body {
font: 100%/1.5 Verdana, sans-serif
}
#wrapper {
margin: 0 auto;
display: block;
width: 960px;
}
.page-header {
text-align: center;
font-size: 1.5em;
font-weight: normal;
border-bottom: 1px solid #ddd;
margin: 30px 0
}
#pagination {
margin: 0;
padding: 0;
text-align: center
}
#pagination li {
display: inline
}
#pagination li a {
display: inline-block;
text-decoration: none;
padding: 5px 10px;
color: #000
}
/* Active and Hoverable Pagination */
#pagination li a {
border-radius: 5px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s
}
#pagination li a.active {
background-color: #4caf50;
color: #fff
}
#pagination li a:hover:not(.active) {
background-color: #ddd;
}
/* border-pagination */
.b-pagination-outer {
width: 100%;
margin: 0 auto;
text-align: center;
overflow: hidden;
display: flex
}
#border-pagination {
margin: 0 auto;
padding: 0;
text-align: center
}
#border-pagination li {
display: inline;
}
#border-pagination li a {
display: block;
text-decoration: none;
color: #000;
padding: 5px 10px;
border: 1px solid #ddd;
float: left;
}
#border-pagination li a {
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s
}
#border-pagination li a.active {
background-color: #4caf50;
color: #fff;
}
#border-pagination li a:hover:not(.active) {
background: #ddd;
}