Проблема с анимацией кнопки в css

Question

Всем здравствуйте. У меня возникла проблема с transitional у кнопки. Анимация при наведении работает прекрасно, но когда я убираю курсор от кнопки то она убирает эту анимацию рывком, есть ли способ сделать обратную анимацию как у transitional при отводе курсора мыши? Вариант с засунуть transitional в обычное состояние кнопки не подойдет т.к. изменяется не только цвет а и letter-spacing. За ранее спасибо!

.buthome1{
    letter-spacing:normal;
    font-weight: bolder;
    font-size: 15px;
    width:100px;
    height: 20px;
    color: ##696969;
    border: none;
    background-color:transparent;
    font-family: "Raleway - Semi Bold";
    outline: none;
    position: absolute;


    
}


.buthome1:hover{
    color: #061e37;
    letter-spacing: 10px;
    transition: color, border, letter-spacing 500ms ;
}

<button class="buthome1">Home</button>

Answer 1

.buthome1 {
  letter-spacing: normal;
  font-weight: bolder;
  font-size: 15px;
  width: 100px;
  height: 20px;
  color: #696969;
  border: none;
  background-color: transparent;
  font-family: "Raleway - Semi Bold";
  outline: none;
  position: absolute;
  transition: color 500ms, border 500ms, letter-spacing 500ms;
}

.buthome1:hover {
  color: #061e37;
  letter-spacing: 10px;
}

<button class="buthome1">Home</button>

БЛОГ НА HUSL

Проблема с анимацией кнопки в css

Ответы (1 шт):