Transform translate

<style>
button{
	margin-right:1rem;
}
.navy{
	padding:30px;
	background-color:navy;
	max-width:100px;
	position: absolute;
}
.reset, .right, .left{
	transition: all .3s ease-in;
}
.reset{
	transform:translateX(0);
}
.right{
	transform:translateX(50px);
}
.left{
	transform:translateX(-20px)
}
.buttons{
	margin-bottom:20px;
}

</style>

<div class="buttons">
<button id="reset">Reset</button> <button id="right">Right</button> <button id="left">Left</button>
</div>

<div>
	<div class="navy" id="block">&nbsp;</div>
</div>

<script>
const buttons = document.getElementsByTagName('button');
console.log(buttons);
const  block = document.getElementById('block');
[...buttons].forEach((button) => button.addEventListener('click', (e)=>{
	console.log(e.target);
	let b = e.target;
	if(b.id == 'reset')
	{ 
		block.classList.remove('right','left');
		block.classList.add('reset')
	}
	if(b.id == 'right')
	{ 
		block.classList.remove('reset','left');
		block.classList.add('right')
	}
	
	if(b.id == 'left')
	{ 
		block.classList.remove('right','reset');
		block.classList.add('left')
	}
	
	})
);
</script>