CSS3 Pagniation

dabblet.css

body {
    background: #222;
}
.arrow {
    background-color: white;
    transform: rotate(45deg);
    position: absolute;
	top: 50%;
}
.arrow, .arrow:before {
    display: block;
    width: 40px;
    height: 40px;
	transition: 0.3s ease;
}
.arrow:hover, .arrow:hover:before {
    width: 50px;
    height: 50px;
}
.arrow.right {
    margin: -20px 0 20px 0;
    right: 20px; 
}
.arrow.right:hover {
    margin-top: -25px;
}
.arrow.left {
	margin: -20px 0 10px 0;
	left: 15px;
}
.arrow.left:hover {
	margin-top: -25px;
}
.arrow:before {
	content: "";
    background: #222;
}
.arrow.right:before {
    transform: translate(-10px, 10px);
}
.arrow.right:hover:before {
    transform: translate(-12px, 12px);
}
.arrow.left:before {
    transform: translate(10px, -10px);
}
.arrow.left:hover:before {
    transform: translate(12px, -12px);
}
.pagination {
     text-align: center;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
}
.pagination a {
   display: inline-block;
   margin: 10px;
   width: 20px;
   height: 20px
}
.pagination a:before {
	background-color: #aaa;
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	transition: 0.3s ease;
}
.pagination a:hover:before {
    width: 15px;
    height: 15px;
    margin: -2px 0 0 -2px;
}
.pagination a.selected:before, .pagination a:hover:before { 
	background-color: #fff;
}
.pagination a.selected:hover:before, .pagination a.selected:before {
	width: 20px;
	height: 20px;
	margin: -5px 0 0 -5px;
}
.author {
	position: absolute;
	left: 10px;
	bottom: 10px;
	text-decoration: none;
}
.author img {
    border: 2px solid white;
    border-radius: 100%;
}
.author img, .author span {
    display: block;
    float: left;
}
.author span {
	color: white;
	margin: 14px 0 0 10px;
}
.author span:after {
    transform: scaleX(0);
    content: "";
    display: block;
    height: 2px;
    background-color: white;
    transition: 0.4s ease;
}
.author:hover span:after {
	transform: scaleX(1);
}

dabblet.html

<a href="#" class="arrow left"></a>
<a href="#" class="arrow right"></a>
<div class="pagination">
   <a href="#"></a>
   <a href="#"></a>
   <a href="#" class="selected"></a>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
</div>
<a class="author" href="http://jcubic.pl">
	<img src="http://1.gravatar.com/avatar/dc10501a6e08f9efcb42bf7b434bf1b1?s=45"/>
	<span>by Jakub Jankiewicz</span>
</a>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}