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.
HTML
<a href="https://www.w3schools.com/css/css3_pagination.asp" target="_blank">CSS Pagination</a> <div class="center"> <div class="pagination"> <a href="#">«</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="#">»</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.