How To Make a Pagination Using HTML and CSS

 CSS Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<style> .center {   text-align: center; }   .pagination {   display: inline-block; }   .pagination a {   color: black;   float: left;   padding: 8px 16px;   text-decoration: none;   transition: background-color .3s;   border: 1px solid #ddd;   margin: 0 4px; }   .pagination a.active {   background-color: #002468;   color: white; }   .pagination a:hover:not(.active) {background-color: #ddd;} </style>

HTML Code

1 2 3 4 5 6 7 8 9 10 11 12

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