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

Question

[Pitman77]

Здравствуйте!
Есть кнопка:

<div class="single-entry-load__loadbutton">
<a href="#">Скачать листовку<span class="icon"><img src="/img/icons_svg/down_arrow.svg"></span></a> 
</div>

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



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

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

Но при таком решении кнопка дергается при наведении, показывая span с иконкой, что не очень красиво выглядит. Как правильно сделать, что бы кнопка плавно разъезжалась и ужималась при наведении и нет, например со скоростью 0.3s?
Спасибо!!!

Answer 1

[Stalker_RED]

.btn {
  /* скрываем часть блока */
  width: 80px; 
  overflow: hidden;

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

.btn:hover {
  /* показываем всё */
  width: 100px;
}

https://jsfiddle.net/tja2Lzmy/

Comments

[Pitman77]

Спасибо!
Навесил на ссылку класс btn - все заработало как надо! К span с иконкой добавил еще opacity: 0/1 и transition: all 0.3s ease 0s; - выглядит весьма симпатично! Еще раз большое спасибо за помощь!!!