Кнопка: Вкл. Изменение цвета при наведении курсора на текст отличается. Почему?

Question

Я добавил ease-in-out к своим кнопкам, чтобы применить переход к выделенному цвету при наведении курсора. По какой-то причине цветовой переход отстает сразу за текстом.

Я попытался применить переход непосредственно к действиям при наведении, и это дало правильный переход при наведении цвета, но не применял часть замедления.

.wsite-button {
  color: white;
  background-image: none !important;
  background-color: @button;
  border-radius: 5px;  
  transition: all 0.3s ease-in-out;
}

.wsite-button:hover {
  background-color: @highlight;
}