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.

Originally published on March 19, 2022

Adding System Fonts
black and gray house beside green trees at daytimeUser-Friendly Navigation - Breadcrumb Dropdown

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023