By Stephen Walker

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.

I am A Button
I am a link button that looking like text

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

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.