@Pitman77

Как сделать плавность раскрытия кнопки при наведении?

Здравствуйте!
Есть кнопка:
<div class="single-entry-load__loadbutton">
<a href="#">Скачать листовку<span class="icon"><img src="/img/icons_svg/down_arrow.svg"></span></a> 
</div>


9b5fcc6eb6a0443fad6177c26eb19b25.jpg

При наведении появляется span с иконкой и левой границей:

57b7a7d3f0be4acda5466d75b5a772f6.jpg

Показывать/прятать span сделал так:

.single-entry-load__loadbutton .icon {
 display: none;
}
.single-entry-load__loadbutton a:hover .icon {
 display: inline;
}


Но при таком решении кнопка дергается при наведении, показывая span с иконкой, что не очень красиво выглядит. Как правильно сделать, что бы кнопка плавно разъезжалась и ужималась при наведении и нет, например со скоростью 0.3s?
Спасибо!!!
  • Вопрос задан
  • 427 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
.btn {
  /* скрываем часть блока */
  width: 80px; 
  overflow: hidden;

  /* плавность */
  transition: width 0.5s ease; 
}

.btn:hover {
  /* показываем всё */
  width: 100px;
}
https://jsfiddle.net/tja2Lzmy/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы