Hover animation not smooth - html

Question

I'm dipping my toes into web design for now and I'm trying to replicate the "buy more" button animation from here( https://themes.getbootstrap.com/preview/?theme_id=67539 ). While I did find a solution for the border, I can't make a smooth animation for the icon(I am using font awesome), instead it just jumps directly.
Thanks in advance for the help
My CSS is this for the button is:
and the html for it is `Buy now <i class="fas fa-level-down-alt navbar__btn--i"></i>`
.navbar__btn {
position: relative;
font-size: 1.2rem;
color: #fff;
display: inline-block;
margin-right: 7rem;
padding-top: .5rem;
}
.navbar__btn:after {
margin-top: .3rem;
display: block;
content: " ";
border-bottom: solid 2px #fff;
transform: scaleX(0);
transform-origin: 0% 100%;
transition: all 1s ease-in-out;
}
.navbar__btn:hover:after {
transform:scaleX(1.2);
}
.navbar__btn:hover .navbar__btn--i {
left: 7rem;
}
.navbar__btn--i {
position: absolute;
top: 5px;
transition: all 1s linear 1s;
}
And the html is
Buy now <i class="fas fa-level-down-alt navbar__btn--i"></i>

Answer 1

Replace the appropriate icon. I designed it according to the link. You can adjust the delays to your liking
.navbar__btn {
position: relative;
font-size: 1.2rem;
color: #fff;
display: inline-block;
margin-right: 7rem;
padding-top: .5rem;
color:black;
text-decoration:none;
color:white;
}
.navbar__btn:after {
margin-top: .3rem;
display: block;
content: " ";
border-bottom: solid 2px #fff;
transform: scaleX(0);
transform-origin: 0% 100%;
transition: all .5s ease-in-out;
}
.navbar__btn:hover:after {
transform:scaleX(1.3);
}
.navbar__btn:hover .navbar__btn--i {
right: -20px;
}
.navbar__btn--i {
position: absolute;
top: 5px;
right:-10px;
line-height:0px;
transition: all .3s linear 0s;
vertical-align:middle;
margin-top:15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="heigth:100px;width:500px;background:red;padding:5px;">
Buy now <i class="fas fa-arrow-right navbar__btn--i"></i>
</div>