contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

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

simple pagination paging

Demo Download

▼ Download Source Code Dibawah Ini ▼


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>

Copy Paste Ful Code diatas.. Simpan code dengan ekstensi .html , dan jalankan dibrowser anda.. Demikian artikel   , semoga bermanfaat

Artikel Rekomendasi



Artikel Terkait

Diskusi