Micro-interactions are small changes that are made when a site visitor mouses over, hovers or clicks on an item. While they can be very distracting if done excessively, they can add a bit of finish to your website. Avada does not do any of these by default, so you will need to add some custom CSS. Fortunately, modern browsers make this very easy and in most cases, JavaScript is not required. I have added a few on this site from the rotating logo (JS required), hover columns, the tilting post cards, and the latest addition is moving an icon when you hover a button. To me, this button interaction is such a small but significant change and remarkably easy to do.

If you hover over the button above you will see that the arrow slides to the right. Since I use a standard button with a right-aligned icon (long arrow right) the CSS is remarkably easy. Any button that uses the long arrow right icon will show this effect. If you use a different icon, you can change that value, or if you want any icon in a button to be affected, just target the “i”.

.fusion-button i {
  transition:transform .3s ease-in-out;
}

.fusion-button:hover i.fa-long-arrow-alt-right,.fusion-button:focus i.fa-long-arrow-alt-right {
transform: translateX(.5rem);
}

/* If you are using a kit the relies on SVGs */

.fusion-button svg {
    transition:transform .3s ease-in-out;
  }
  
  .fusion-button:hover svg.fa-long-arrow-alt-right,.fusion-button:focus svg.fa-long-arrow-alt-right {
  transform: translateX(.5rem);
  }

The first entry adds a transition effect to the element. In this case, I want to target the transform property that will take place when I hover over or set focus on (for keyboard users) the button. This transition will take .3 seconds and the easing will be on both ends of the transition curve. The second entry says any time I hover over the button shift the icon .5rem (8px) to the right.

That’s it. A couple of lines of CSS and now you have what I consider to be an impactful micro-interaction.

Bonus: If you want to do the same with text or title that has an adjacent icon, you can do the same. I have a class called link–action-right that I can add and it will shift the icon just like the button. This class is applied to the Avada element and then targets the anchors within that have an icon. If you need more specificity, you can target the particular icon the same way I did in the previous example above.

.link--action-right a i {
    transition:transform .3s ease-in-out;
  }
  
  .link--action-right a:hover i, .link--action-right a:focus i, {
  transform: translateX(.5rem);
  }

/* If you are using a kit the relies on SVGs */

.link--action-right a svg {
    transition:transform .3s ease-in-out;
  }
  
  .link--action-right a:hover svg, .link--action-right a:focus svg, {
  transform: translateX(.5rem);
  }

Originally published on March 12, 2022

red and gray hand toolThe Avada Live Editing Toolbar
Adding System Fonts

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