Simple Elegan Pagination Style Css3
Tutorial kali ini kita akan membuat "Simple Paging dengan CSS3" ,Ya... sangat simple.. sehingga mudah untuk dipahami, dan sangat mudah untuk di implementasikan.. Membuat style halaman/paging/pagination dengan css3 ini akan menjadi dasar untuk anda..paging dibawah ini dibuat dengan sesimple mungkin, namun gaya yang cukup elegan dan menawan,, efek yang sama dengan paging-pagin yang lain.. Namun codenya cukup simple.. Silahkan di coba
CODE CSS:
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 6px 14px;
text-decoration: none;
}
.pagination a.active {
background-color: #C20D0D;
color: white;
border-radius: 50%;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 50%;
}
</style>
CODE HTML :
<body>
<h3>Simple Pagination Style Suckittrees.Com</h3>
<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>
</body>
FULL CODE :
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 6px 14px;
text-decoration: none;
}
.pagination a.active {
background-color: #C20D0D;
color: white;
border-radius: 50%;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 50%;
}
</style>
</head>
<body>
<h3>Simple Pagination Style Suckittrees.Com</h3>
<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>
</body>
</html>
Copy Paste Ful Code diatas.. Simpan code dengan ekstensi .html , dan jalankan dibrowser anda.. Demikian artikel , semoga bermanfaat