I'm interested in including an animation into my front page and have never created a custom CSS. I'm using Avada. (I know there are Avada haters out there, so no need to comment)
My front page is https://www.howardcomgroup.com – scroll to the link: "MORE →"
I want to include the animation on hover shown here: MORE with Arrow Stretch on Hover (codepen.io)
If you know Avada, the coding differences aren't helping me to progress for the html and css columns in codepen. The learning curve is beyond my level! What to enter into CSS, what to enter into the CSS class and ID boxes…all those details and various windows I need to access to get there seems daunting! I also made the "MORE →" elements a title – is that an error, too?
I also would love to get links to tutorials that offer a thorough discussion of this topic as it relates to Avada, too. Avada's video and documentation are severely lacking.
Any help you can provide would be greatly appreciated!
Avada has its own animated buttons, but if you want this exact animation effect you should use the button element, and select the arrow icon in button that closely resembles it, and then target it with css.
Right now you are using a H1 Title element for a link, and you shouldn’t do it.
<h1 ><a href=””>MORE →</a></h1>
With the way your HTML is structured, there is no way to target your arrow directly.
So, get rid of the title and try with the button.