Untitled

dabblet.css

.cima, .esquerda, .direita, .baixo {
	padding: 1em 2em;
}

.tela {
	position: relative;
	background-color: #000;
	width: 300px;
	height: 300px;
	margin: 0 auto;
	padding: 150px;
	box-sizing: border-box;
}

.pacman {
	width: 40px;
	height: 40px;
	background-color: #ff0;
	border-radius: 50%;
	position: relative;
	left: -20px;
	transition-property: margin-top, margin-left;
	transition-duration: 0;
	transition-delay: 999999s;
	transition-timing-function: linear;
}

.cima:active ~ .tela .pacman,
.esquerda:active ~ .tela .pacman,
.direita:active ~ .tela .pacman,
.baixo:active ~ .tela .pacman {
	transition: margin-top 2s linear,
				margin-left 2s linear;
}

.cima:active ~ .tela .pacman { margin-top: -150px;}

.baixo:active ~ .tela .pacman {	margin-top: 150px;}

.esquerda:active ~ .tela .pacman {	margin-left: -150px;}

.direita:active ~ .tela .pacman {	margin-left: 150px;}

dabblet.html

<button class="cima"></button>
<button class="esquerda"></button>
<button class="direita"></button>
<button class="baixo"></button>

<div class="tela">
	<div class="pacman"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}