By Stephen Walker

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.

Previous post

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

share the article

Leave a Reply

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

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.