Simple Html CSS pagination | 3 Type Of Simple Html CSS pagination







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.

Output

Simple Html CSS pagination | 3 Type Of Simple Html CSS pagination

CSS code

 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;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Simple Html CSS pagination | 3 Type Of Simple Html CSS pagination

Simple Html CSS pagination | 3 Type Of Simple Html CSS pagination

Simple Html CSS pagination | 3 Type Of Simple Html CSS pagination

We have completed our CSS section,  Here is our updated output with CSSHope you like the Simple Html CSS pagination, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us to create a Simple Html CSS pagination using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Rashadul Alam

Check out more…..



Share on:

Leave a Comment