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.

😀.