Untitled

dabblet.css

.up, .down, .left, .right {
	position: absolute;
	margin-top: 100%;
	margin-left: 50%;
	font-size: 40px;
	width: 50px;
	height: 50px;
}

.up {
	top: -300px;
	left: -25px;	
}
.down {
	top: -200px;
	left: -25px;
}
.left {
	top: -250px;
	left: -75px;
}
.right {
	top: -250px;
	left: 25px;
}

.up:active ~ .box {
	transition: margin-top 2s linear, 
	            margin-left 2s linear;	
	margin-top: 1px;
}

.down:active ~ .box {
	transition: margin-top 2s linear, 
		    margin-left 2s linear;
	margin-top: 500px;
}

.left:active ~ .box {
	transition: margin-top 2s linear, 
	            margin-left 2s linear;	
	margin-left: 1px;
}

.right:active ~ .box {
	transition: margin-top 2s linear, 
	            margin-left 2s linear;	
	margin-left: 500px;
}

.box {
	width: 100px;
	height: 100px;
	background:red;
	transition-property: margin-top, margin-left;
	transition-duration: 0;
	transition-delay: 999999s;
	transition-timing-function: linear;
}

dabblet.html

<button class="up" accesskey="j">&uarr;</button>
<button class="down" accesskey="k">&darr;</button>

<button class="left" >&larr;</buton>
<button class="right">&rarr;</button>

<div class="box"></div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}