It’s the Little Things Part 2

In the previous article, I showed how to add an arrow and some basic animation. Of course, no sooner did I post it, I went to the National World War II Museum website — a thing of beauty in my opinion — and was reminded of their button animation. They basically have a hide-and-show arrow animation that shifts the text to the left while the arrow fades in from the right. So the challenge was could I make it work in Avada? It is just CSS, so yes.

In this instance, I am choosing to add the class “link–action-right” to the button so that it does not impact all the buttons. If you are wondering, yes, it is the same class name as the other example and this is now my go-to. The key difference is that you do not assign an icon to the button as this is injected through the CSS. I am using font Awesome Pro, but the code below should work on any installation. One of the keys to this is not changing font colors as that transition can cause the appearance to be a little off if the colors text and arrow colors have to change.

.link--action-right {
	background-color: #c21212;
	padding: 12px 25px 10px;
	line-height: 18px;
	transition: all 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.link--action-right span {
	display: inline-block;
	transform: translateX(0);
	transition: all 0.4s cubic-bezier(0.55, 0.085, 0, 0.99);
}
.link--action-right:hover span,.link--action-right:focus span {
	transform: translateX(-15px);
}
.link--action-right span:before {
	position: absolute;
	top: 0;
	right: -10px;
	opacity: 0;
	font-size: 16px;
	font-size: 1rem;
	height: 100%;
	transition: all 0.4s cubic-bezier(0.55, 0.085, 0, 0.99);
}
.link--action-right span:before {
	content: "\f30b";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

.link--action-right:hover span:before, .link--action-right:focusspan:before  {
	right: -30px;
	opacity: 1;
}

Like my previous example, this is just some basic transition CSS. This example relies on the button settings in Avada. If you want to apply this to another element, you will need to add other CSS. Here is my example on CodePen with additional CSS.