It’s the Little Things

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);
  }