1

Всем здравствуйте. У меня возникла проблема с 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>

4
  • Не понятно, почему "Вариант с засунуть transitional в обычное состояние..." не устраивает.
    – UModeL
    13 фев 2021 в 18:25
  • Так как если я его туда засуну то кнопка изначально будет иметь изначально такой вид который она должна иметь при нажатии. 13 фев 2021 в 20:03
  • с чего это вдруг? Начальное - это начальное, при наведении - это при наведении. hover же.
    – UModeL
    13 фев 2021 в 20:16
  • Тут всё логично. Вы даёте плавность при "наведение", когда убираете мышь с элемента, то "наведения" нет, как и вашей плавности.
    – De.Minov
    13 фев 2021 в 23:18

1 ответ 1

4

.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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.