CSS Pagination
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination</title>
</head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
text-decoration:none;
font-size: 40px; /*Use font size to change the pagination size */
padding: 10px 13px;
margin: 3px;
/* border-radius: 6px; */
border: 1px solid crimson;
transition: background-color 0.8s; /*Adding transition effects on hover*/
}
.pagination a.active {
background-color: rgb(95, 218, 95);
/* border-radius: 8px; */
}
.pagination a:hover:not(.active) {
background-color: #555dc2;
}
.pagination a:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.center {
text-align: center;
}
</style>
<body>
<div class="center">
<div class="pagination">
<a href=""><<</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a class="active" href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">>></a>
</div>
</div>
</body>
</html>
No comments:
Post a Comment