Squirrel & Peanut · CSS Pagination

Desain elemen halaman berupa navigasi angka yang terispirasi dari tokoh kartun Flying Squirrel. Bentuk setiap item navigasi menggambarkan bahwa mereka adalah kacang-kacang pohon yang sangat disukai oleh tupai terbang ini. Memang tidak mirip, tapi cukup mewakili:

HTML

<div id="blog-pager">
    <a class="prev" href="#">«</a>
    <a class="num" href="#">1</a>
    <a class="num active" href="#">2</a>
    <a class="num" href="#">3</a>
    <a class="num" href="#">4</a>
    <a class="next" href="#">»</a>
</div>

CSS

#blog-pager {
  text-align:center;
  line-height:36px;
}

#blog-pager a {
  font:bold 16px Georgia,Serif;
  color:#711F05;
  text-decoration:none;
  margin:0px auto 10px;
  background-color:white;
  padding:10px 15px;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  -webkit-border-radius:40% 0% 40% 40%;
  -moz-border-radius:40% 0% 40% 40%;
  border-radius:40% 0% 40% 40%;
  position:relative;
  -webkit-transition:all 0.26s ease-in-out;
  -moz-transition:all 0.26s ease-in-out;
  -ms-transition:all 0.26s ease-in-out;
  -o-transition:all 0.26s ease-in-out;
  transition:all 0.26s ease-in-out;
}

#blog-pager a:before,
#blog-pager a.active:after {
  content:"";
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-color:#B62B00 #B62B00 transparent transparent;
  position:absolute;
  top:0px;
  right:0px;
}

#blog-pager a.active:before,
#blog-pager a.active:after {
  border-width:6px;
  top:4px;
  right:4px;
}

#blog-pager a.active:after {
  top:auto;
  right:auto;
  bottom:4px;
  left:4px;
  border-color:transparent transparent #B62B00 #B62B00;
}

#blog-pager a:hover,
#blog-pager a.active {
  color:white;
  background-color:#711F05;
}

#blog-pager a.active {
  -webkit-border-radius:40% 0% 40% 0%;
  -moz-border-radius:40% 0% 40% 0%;
  border-radius:40% 0% 40% 0%;
}

#blog-pager a:active {
  background-color:#333;
}

Lihat Demo