Simple Elegan Pagination Style Css3

Posted in HTML & CSS Life at 23 Agustus 2017 With 0 Comments

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

Demo Download

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="#">&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>

</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="#">&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>
</body>
</html>