使用CSS或JS来回切换按钮过渡

.button {
  /* 按钮的共同样式 */
}

.button.normal {
  /* 初始状态的样式 */
}

.button.hover {
  /* 鼠标悬停状态的样式 */
}

.button.active {
  /* 按钮被点击状态的样式 */
}

.button.transition {
  transition: all 0.3s ease;
}

<button class="button normal">按钮</button>

var button = document.querySelector('.button');

button.addEventListener('mouseenter', function() {
  button.classList.remove('normal');
  button.classList.add('hover');
});

button.addEventListener('mouseleave', function() {
  button.classList.remove('hover');
  button.classList.add('normal');
});

button.addEventListener('mousedown', function() {
  button.classList.remove('hover');
  button.classList.add('active');
});

button.addEventListener('mouseup', function() {
  button.classList.remove('active');
  button.classList.add('hover');
});

$('.button').mouseenter(function() {
  $(this).removeClass('normal').addClass('hover');
});

$('.button').mouseleave(function() {
  $(this).removeClass('hover').addClass('normal');
});

$('.button').mousedown(function() {
  $(this).removeClass('hover').addClass('active');
});

$('.button').mouseup(function() {
  $(this).removeClass('active').addClass('hover');
});