How to Add Animated CTA Button on WordPress

If you want to add a nice animated Call To Action button on your WordPress website or blog, just read this article. I will explain how you can do it. You can see right below some buttons that I have created. Just hover over them to see the animation effect.

To create buttons like these, we will use the Divi theme. Divi is a premium WordPress theme that I’m using. I’m using it right on this blog, too.

The first CTA button (the one with the slide-in arrow icon showing on the right when you hover over the button) is the Divi’s default button module. It is also my favorite style that I’m using in most cases. There is no need to play further with the styling settings of the button in case this is what you are after.

You may however want to achieve a different animation effect, so in that case you can explore all the styling options of this Divi module. I will explain briefly below how you can achieve the design effect of the second button (the purple one) that you can see above.

Tutorial on how to create an animated CTA button with Divi

Note: The Divi theme comes with both “Button” and “Call To Action” modules. The Call To Action module can be used in case when you need to add some additional text with a title above the CTA button along with some background.

 

Divi Call To Action Module

 

However, I will be talking in this tutorial about the Divi Button module, not the Call To Action module.

So, the first thing that you need to do (after adding a new button module to your Divi page or post) is to set the text and the link for your button (the URL to which you want to link your button).

 

 

Now we are ready to work with the Design settings. In the “Button” settings enable the option “Use Custom Styles for Button”.

 

 

Then just play with all the options that will be revealed when you enable this option. In my case I will set the following:

I changed the background color of the button to purple, set the button text color to white and I set the border radius to 35px. I changed the button font to Allerta. And I also added some padding in the spacing settings.

 

 

Some of the options here also have the hover options. Using these features you can style the animation effect that you want your button to have on hover. For example, in my case, I have set up the following:

I changed the button background color to blue on hover.

 

 

And then in the button’s advanced settings in Transitions you can choose how long should the animation effect perform. You can play with the “Transition Duration” value and set the “Transition Delay”, too – in case you want to wait e.g. 150 milliseconds before the animation starts.

 

 

Finally, I will give you one useful tip: If you are using the Divi buttons for your affiliate links, you may want to make them open in a new window and and add a nofollow tag to them. You can make your button nofollow in the Attributes in the Advanced settings of the Button module. Just tick the options that you need. And to make it open in a new window, you can set this in the Content settings > Link > Button Link Target.

 

 

So if you like these Divi-specific Call-To-Action animated buttons, I would recommend you to get a copy of the Divi theme. Moreover, together with Divi you get access to other Elegant Themes great premium plugins called Monarch (for social sharing buttons) and Bloom (for email opt-in boxes).

Finally, you might also like to check out my tutorial on how to add a 3rd CTA button to the fullwidth header Divi module.

PS: If you are looking for a free way to do this, you might like to try building your WordPress layout(s) with the WordPress default builder Gutenberg that is free. However, in my opinion the Divi’s buttons are more attractive.