Hover отрабатывает только при наведении на верхний бордер, а надо чтобы при наведении на всю кнопку, почему и как?

Для того чтобы изменить поведение hover эффекта на кнопке, чтобы он отрабатывал при наведении на всю кнопку, а не только на верхний бордер, можно воспользоваться следующим CSS кодом:

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  border: 2px solid #3498db;
  border-radius: 5px;
  transition: all 0.3s;
}
 
.button:hover {
  background-color: #2980b9;
  color: #fff;
}

В данном коде мы используем свойство `transition` для плавного изменения стилей при наведении курсора на кнопку. Однако, чтобы hover эффект отрабатывал при наведении на всю кнопку, а не только на верхний бордер, можно добавить дополнительные стили для кнопки при событии `hover`.

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  border: 2px solid #3498db;
  border-radius: 5px;
  transition: all 0.3s;
}
 
.button:hover {
  background-color: #2980b9;
  color: #fff;
  border: 2px solid #2980b9;
}
 
.button:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
  border-radius: 5px;
}

В данном примере мы добавили псевдоэлемент `::before`, который создает невидимый слой над кнопкой с прозрачным фоном. Теперь hover эффект будет отрабатывать при наведении на всю кнопку, а не только на верхний бордер. При наведении курсора на кнопку, цвет фона изменится на более темный, а также будет показан прозрачный слой поверх кнопки.

Таким образом, вы можете добиться желаемого эффекта hover на кнопке, чтобы он отрабатывал при наведении на всю кнопку, используя CSS стили и псевдоэлементы.