A carousel pagination built with CSS

dabblet.css

/**
 * A carousel pagination built with CSS
 */

body {
	background:grey;
}

.nav {
	list-style:none;
	padding-left:0;
	margin:10% auto;
	
	/* Presentational purposes */
	min-width:150px;
	width:30%;
}

.nav li:first-child {
	float:left;
}

.nav li:nth-child(2) {
	float:right;
}

.nav a {
	background-color:#006691;
	border:3px solid #fff;
	display: inline-block;
	height:60px;
	text-indent: -999em; /* You nasty bastard */
	width:60px;

	-webkit-border-radius: 3em;
	-moz-border-radius: 3em;
	border-radius: 3em;
}

.nav a:hover,
.nav a:focus {
  background-color: #722f31;
}

.nav a:active {
	position:relative;
	top:1px;
}

.nav a:after {
  content: '';
  display: block;
  height: 20px;
  border: 1px solid #fff;
  border-width: 1px 1px 0 0;
  width: 20px;
}

.nav li:first-child a:after {
  margin-left: 1.5em;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.nav li:nth-child(2) a:after {
  margin-left: 1em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

dabblet.html

<ol class="nav">
	<li><a href="#">Previous</a></li>
	<li><a href="#">Next</a></li>
</ol>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"all"}