Почему только одна из трех кнопок реагирует на наведение мыши и меняет свое состояние?

1. Вероятно, только одна из трех кнопок реагирует на наведение мыши и меняет свое состояние из-за неправильного присвоения классов или идентификаторов в HTML-разметке. Убедитесь, что все три кнопки имеют уникальные классы или идентификаторы, чтобы JavaScript мог правильно обращаться к ним.

2. Для улучшения эффекта фонарика при наведении курсора на кнопки с классом **btn\_clip** можно использовать следующий подход:

CSS:
```css
.btn_clip {
  position: relative;
  overflow: hidden;
}

.btn_clip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.btn_clip:hover::before {
  width: 200%;
  height: 200%;
}
```

JavaScript (не обязательно, но можно использовать для добавления дополнительных эффектов):
```javascript
const buttons = document.querySelectorAll('.btn_clip');

buttons.forEach(button => {
  button.addEventListener('mouseenter', () => {
    button.classList.add('hovered');
  });

  button.addEventListener('mouseleave', () => {
    button.classList.remove('hovered');
  });
});
```

Этот код создает эффект увеличения круга при наведении курсора на кнопку с классом **btn\_clip**. Можно настроить размер, цвет и скорость анимации с помощью CSS свойств. Если требуется добавить дополнительные эффекты при наведении, можно использовать JavaScript для управления классами элементов.

https://codepen.io/kusakinvova/pen/ExJRvqO 
 вот как я решил проблему 
 
 
document.querySelectorAll('.btn_clip').forEach(button => {
    button.addEventListener('mousemove', e => {
        // Получаем координаты курсора относительно кнопки
        const rect = button.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        // Устанавливаем переменные для текущей кнопки
        button.style.setProperty('--x', x + 'px');
        button.style.setProperty('--y', y + 'px');
    });
});

проблема связана с вычислением координат круга. У меня небольшой экран, поэтому все кнопки в ряд не поместились, а выстроились так: 
 
кнопка  кнопка

кнопка
 
 И я заметил, что у нижней кнопки круг всё же мелькает, но по нижнему краю. А когда увеличил радиус до 40px, такое же мелькание заметил и у правого края правой кнопки.