CSS3 keyboard arrow keys

dabblet.css

/**
 * CSS3 keyboard arrow keys
 */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box}

body {
	width: 100%;
	height: 100%;
	background: url('http://fc07.deviantart.net/fs71/i/2011/121/f/7/1304312356_subtle_texture_stock_by_redwolf518stock-d3fe0dm.jpg');
	background-size: cover}

ul {
	list-style: none;
	position: relative;	
	width: 152px;
	height: 104px;
	left: 50%;
	top: 30%;
	margin-left: -76px}

li {
	position: absolute;
	top: 56px;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: #f1f1f1;
	border: 1px solid #eee;
	border-radius: 8px;
	box-shadow: 0 6px 10px rgba(0,0,0,.3);
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite}

li:nth-child(1) {
	top: 8px;
	left: 56px;
	animation-name: clickUp}

li:nth-child(2) {
	left: 8px;
	opacity: .3}

li:nth-child(3) {
	left: 56px;
	animation-name: clickDown;
	animation-delay: .75s}

li:nth-child(4) {
	left: 104px;
	opacity: .3}


@keyframes clickUp {
	0% {
		top: 8px;
		background-color: #f1f1f1;
		box-shadow: 0 6px 10px rgba(0,0,0,.3)}
	100% {
		top: 10px;
		background-color: #ebebeb;
		box-shadow: inset 0 0 40px 10px rgba(0,0,0,.02);
		box-shadow: 0 2px 4px rgba(0,0,0,.1)}
}


@keyframes clickDown {
	0% {
		top: 56px;
		background-color: #f1f1f1;
		box-shadow: 0 6px 10px rgba(0,0,0,.3)}
	100% {
		top: 58px;
		background-color: #ebebeb;
		box-shadow: inset 0 0 40px 10px rgba(0,0,0,.02);
		box-shadow: 0 2px 4px rgba(0,0,0,.1)}
}

dabblet.html

<ul>
	<li>&#8593;</li>
	<li>&#8592;</li>
	<li>&#8595;</li>
	<li>&#8594;</li>
</ul>

settings.json

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