CSS Pagination

CSS Pagination is used if your website have lots of pages. You can apply style to page number in website.

We can apply css properties to page number, next & previous link such as border, background color, text color, transition, text-decoration etc.

Example :

<html>
<head>
<title>Learn CSS Pagination tutorials by aryatechno</title>
<style>
.pagination a {
color: #000000;
float: left;
padding: 9px 18px;
text-decoration: none;
transition: background-color .4s;
border: 1px solid #666666;
}
.pagination a:hover {
color: #000000;
background-color:#CCCCCC;
}

.pagination a.active {
background-color: #FFCC00;
color: #FFFFFF;
border: 1px solid #666666;
}


</style>
</head>
<body>
<h2>CSS Pagination with Borders and transition.</h2>
<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#" class="active">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">&raquo;</a>
</div>
</body>
</html>

Output :

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

82654