Pure CSS Only Pagination With Hover Effect

In this post I am going to share Pure CSS Only Pagination With Hover Effect. Pagination helps to device the page content in multiple pages. If you are working on some core php project and looking for css only pagination with no third party css then you can download this script and apply.

Pure CSS Only Pagination With Hover Effect

HTML

<a href="https://www.w3schools.com/css/css3_pagination.asp" target="_blank">CSS Pagination</a>
 
<div class="center">
  <div class="pagination">
     <a href="#">&laquo;</a>
     <a href="#">1</a>
     <a href="#" class="active">2</a>
     <a href="#">3</a>
     <a href="#">4</a>
     <a href="#">5</a>
     <a href="#">6</a>
     <a href="#">&raquo;</a>
  </div>
</div>



CSS

.center {
  text-align: center;
}
 
.pagination {
  display: inline-block;
}
 
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  borer-radius: 15px;
  transition: background-color 3s;
}
 
.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
 
.pagination a:hover:not(.active) {background-color: #ddd;}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by jglchen. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.