Как сделать плавное изменение цвета кнопки при наведении (transition)?

Добавь transition самому элементу (не в :hover!), и тогда любое изменение свойства будет плавным:

.btn {
  background: #4f46e5;
  transition: background 0.2s ease;
}
.btn:hover {
  background: #4338ca;
}

Важный момент: transition пишется на обычном состоянии, а не внутри :hover. Если написать только в :hover, то плавным будет наведение, а возврат — рывком. Можно перечислить несколько свойств: transition: background 0.2s, transform 0.2s; или анимировать всё: transition: all 0.2s ease;.

transition: background 0.3s; на сам элемент, а не на :hover.

Положил transition внутрь :hover, и работает рывком назад. Вынес наружу — починилось.