Решений несколько и все реализовывается на css
заготовка
<h4>Форма</h4>
<button>Кнопка</button>
первый вариант через позиционирование
button{
position: relative;
left:0px;
transition: 2s;
}
h4:hover + button{
left:200px
}
второй вариант через трансформацию
button{
transition: 2s;
transform: translateX(0px);
}
h4:hover ~ button{
transform: translateX(200px);
}
Если нужно скриптом, то:
html
<h4 onmouseenter="bottonMove();">Форма </h4>
<button type="button" class="btn btn-success palette animateBotton" onclick="rev(sentence, result)" id="animateBotton">Кнопка</button>
css
.animateBotton{
position:relative;
}
javascript
function bottonMove(){
var start = Date.now();
var element = document.getElementById('animateBotton');
var timer = setInterval(function() {
var timePassed = Date.now() - start;
element.style.left = timePassed / 5 + 'px';
if (timePassed > 1000) clearInterval(timer);
}, 20);
}
Но лучше делать на html+css и избегать по возможности ситуации по включению js в верстку.