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

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