<div class="wrapper">
<div class="button">
<div class="button__circle">
<div class="button__circle-shadow"></div>
</div>
<div class="button__body">Button</div>
</div>
</div>$circle-size: 50px;
$transition: 0.3s;
$base-shift: translateX(-$circle-size * 0.25);
$hover-shift: translateX(-$circle-size * 0.75);
$circle-color: #F79854;
$button-color: linear-gradient(90deg, #427C33 0%, #6EBC5A 100%);
$blend-color: mix(#F79854, #427C33);
.wrapper {
width: 500px;
height: 500px;
display: flex;
align-content: center;
justify-content: center;
}
.button {
$block: &;
height: $circle-size;
display: flex;
cursor: pointer;
&__circle,
&__circle-shadow {
height: $circle-size;
width: $circle-size;
border-radius: 50%;
}
&__circle {
position: relative;
z-index: 2;
background: $circle-color;
overflow: hidden;
}
&__circle-shadow {
position: absolute;
left: 100%;
background: $blend-color;
transition: $transition;
transform: $base-shift;
#{$block}:hover & {
transform: $hover-shift;
}
}
&__body {
height: $circle-size;
width: $circle-size * 6;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: $button-color;
border-radius: $circle-size;
transition: $transition;
transform: $base-shift;
#{$block}:hover & {
transform: $hover-shift;
}
}
}
<img src="https://i.imgur.com/4LF4d3J.jpg" ondragstart="return false;">
var x = 0, y = 0;
var player = document.getElementById('player');
function addControls (forward, backward, left, right) {
document.onkeypress = function (event) {
if (event.key == forward) {
y--;
player.style.top = y + 'px';
}
else if (event.key == backward) {
y++;
player.style.top = y + 'px';
console.log(event);
}
else if (event.key == left) {
x--;
player.style.left = x + 'px';
}
else if (event.key == right) {
x++;
player.style.left = x + 'px';
}
}
}
addControls('w', 's', 'a', 'd');left, и right, движок теряется и не знает, что делать. Собственно, поэтому и не работает перемещение направо. Поэтому меняем только left и top. 
