5/5

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors attention. So in this brief article I am going to show you how easy it is to make attention grabbing buttons to help with conversions using Animista.

What is Animista.

So for those that have never heard of Animista it is a collection of css animation to add to your web projects created by Ana Travis. There are six categories ranging from basic to backgrounds each with a ton of css animations to suit your needs. But for this example we will be sticking the Attention Category so let’s get started.

Let’s Get Started

If you have not done so already visit the Animista site and click on attention from the menu.

For this example I will be selection vibrate.

Under vibrate you are given 3 choices vibrate-1, vibrate-2 and vibrate-3 each effect is more vibrant than t he last. I will be using vibrate-1.

You are also given a lot of options that if you feel comfortable feel free to adjust them to your needs. I tend to leave these alone and just roll with the defaults.

Assuming you already have your button on the page open the options and click on the advanced tab.

Because the animations are css powered we will have to do two things to bring your button to life.

  • Copy the class vibrate-1 to our options > advanced area of your button.
  • And add the key frames as well as the class to our customizer or stylesheet of our child theme.

The best part about of all this is that they make it so easy it is pretty much click to copy and apply.

Where to find class and key frames

The class and keyframes can be found by clicking the brackets located to your right.

If you have done everything correctly this should be your outcome.

Now you should be able to grab the attention of your visitors with just some simple CSS.

The process is the same for the majority of the classes please note I have not tried them so if you run into issues let me know in the comments.

😀.

Related Articles

How To Add A Reading Progression Bar To Your Elementor Site

In todays article we will be going over 2 ways to add a reading progression...

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to...

How To Trigger A Popup With a Menu Item

For this tutorial I will show you how to trigger a popup via a custom...

How To Hide And Show Widgets On Click

Earlier this week I was contacted by a user in the Elementor Facebook group who...

Leave a Reply

Your email address will not be published. Required fields are marked *

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.