Rotate Font Awesome Icon

Question

So we have this button :

<button type="button" class="btn"> 
 <a href="#">This goes somewhere</a>
 <i class="fa fas-arrow-right"></i>
</button>

I want to rotate the icon 90deg so it will be a down arrow on hover and the problems I have are these :

-When using css hover and rotate the problem is you have to hover the icon and I want the arrow to rotate 90deg when hovering the button and I don't known if you can make the hover happen on the icon when hovering the button and even so when hovering the icon it rotates to 90deg but then goes back to initial position and I want it to stay as long as you are hovering the button.

I have tried with javascript and it works just fine with mouseover and mouseout to add and remove a class with tranform rotate 90deg but the problem is I can't figuer out how to make the animation happen faster, with javascript it happens really slow, what I mean by slow is that on hover the button changes colors and the color changes but the arrow only turns down after like 2-3s.

So my question is can you control the animation to be faster with javascript? Can you do it with css when hovering the button and make it stay at 90deg and only go back to initial position once you hover out?

Answer 1

You can use

.btn:hover > i {
 display: inline-block;
 transition: 1.5s ease-in-out;
 transform: rotate(180deg);
} 

You need to display inline-block if you want the i tag to rotate. I might also suggest using span tags instead of i tags for font awesome icons since span's have less semantic meaning where i tag is reserved for italics. Also you can edit the speed and change the animation type by editing the transition code if you want.

Answer 2

You don't need Javascript to achieve that. With the :hover selector you can apply css properties when the user hover the button. You can set the velocity changing the ms/s on the transition property.

.btn:hover i {
   transition: all 300ms;
   transform: rotate(90deg);
}