```javascript
const button = document.querySelector('.button');

button.addEventListener('mouseenter', function() {
  this.style.background = "linear-gradient(to right, #ff6699, #6699ff)";
});

button.addEventListener('mouseleave', function() {
  this.style.background = "linear-gradient(to right, #6699ff, #ff6699)";
});

button.addEventListener('mousedown', function() {
  this.style.background = "linear-gradient(to right, #ff6699, #6699ff, #ff6699)";
});

button.addEventListener('mouseup', function() {
  this.style.background = "linear-gradient(to right, #6699ff, #ff6699)";
});
```

このコードでは、`document.querySelector`を使って取得した `button` 要素に `mouseenter`、`mouseleave`、`mousedown`、`mouseup` イベントリスナーを追加している。マウスカーソルがボタンの上に来たとき、ボタンの背景を左から右へのグラデーションカラーに変更する。マウスカーソルがボタンから離れると、背景色を元のグラデーションカラーに戻します。ユーザーがボタンをクリックすると、背景色を処理/ロード処理をエミュレートするグラデーション色に変更し、ユーザーがボタンを離すと、背景色を元のグラデーション色に戻します。
```javascript
const button = document.querySelector('.button');

button.addEventListener('mouseenter', function() {
  this.style.background = "linear-gradient(to right, #ff6699, #6699ff)";
});

button.addEventListener('mouseleave', function() {
  this.style.background = "linear-gradient(to right, #6699ff, #ff6699)";
});

button.addEventListener('mousedown', function() {
  this.style.background = "linear-gradient(to right, #ff6699, #6699ff, #ff6699)";
});

button.addEventListener('mouseup', function() {
  this.style.background = "linear-gradient(to right, #6699ff, #ff6699)";
});
```

В этом коде мы добавляем слушатели событий `mouseenter`, `mouseleave`, `mousedown` и `mouseup` на элемент `button`, который мы получаем с помощью `document.querySelector`. Когда курсор мыши наводится на кнопку, мы изменяем её фон на градиентный цвет слева направо. Когда курсор мыши покидает кнопку, мы изменяем цвет фона обратно на изначальный градиент. Когда пользователь нажимает на кнопку, мы изменяем цвет фона на градиент, который эмулирует процесс обработки/загрузки, а когда пользователь отпускает кнопку, мы возвращаем цвет фона к изначальному градиенту.