How To Make Awesome Animated Button In WordPress? (2 Ways)

In the modern, fast-paced digital world, a static button is insufficient. The key to drawing visitors in, increasing interaction, and persuading them to take action on your WordPress website is animated buttons. 

Animated buttons can make user interactions more memorable, whether you are using them to draw attention to a newsletter signup, highlight a “Buy Now” call-to-action, or add some fun to your navigation.

In this article, we’ll walk you through two methods to design stunning elementor button animation:

• Using CSS Code and an Elementor Page Builder
• Utilizing an add-on

Let us get started and transform those lifeless buttons into vibrant design components that improve the user experience on your website!

Method 1: Elementor Button Animation Using CSS Code and the Elementor Page Builder

This approach is best suited for experts with advanced knowledge and custom coding skills. However, if you are a novice with no prior coding experience, you can go straight to Method 2.

• We will start by making a new page. Let us call the page “Awesome Button with Animation.” Click Publish now, and then select Edit with Elementor. To hide the header and footer, select Elementor Canvas as the page layout and enable Hide Title from the page settings.
• The minimum height will then be changed to 100% and a container will be added. Place the items in the center and justify the content.
• Let us now alter the color of the background. The file below contains the CSS and JavaScript code as well as all of the color codes used in this tutorial.
• Here, we will add a button widget, which we will call Awesome Button. Go to the Style tab and set the typography font to Poppins. Change the font size to 18 pixels, the font weight to 400 normal, and set Transform to Uppercase.
• Next, we’ll add a background color to the button and a hover color. Again, color codes are in the description. Change the text color to white and update the padding as follows: Left: 30; Right: 20; Top: 20; Bottom: 20. Feel free to adjust the padding based on your preference. Now, click Publish and preview the changes.
• Next, we’ll add some custom CSS. We’ll name the CSS class Awesome Button. Now we’ll inspect the page. As we can see, there’s an anchor element with two span tags inside. We’ll use these to write our JavaScript.
• To add JavaScript, we’ll use Elementor Pro, but you can also use a free plugin that allows custom scripts.
• From Elementor, go to Custom Code, then click on Add New Custom Code.
• Let’s title it Awesome Button. Set the location to Body End. Set the priority to 10 and make sure Always Load Query is checked. Now, paste the JavaScript code. You’ll find it in the description box. This script adds four more span elements to our button. Click Publish and a Publish Settings menu will appear. 
• Here, specify the page or path where the code should apply, since we don’t want it running on the whole website. Then, click Save and Close.
• Reload the page and check if the code is working. You should now see four extra spans added under the Awesome Button text. 
• Next, go to Customize, then to Additional CSS. Copy and paste the CSS code there. You’ll find it in the description box. We’re doing this directly in the theme, so we can see a live preview. Before running the CSS, add a comment so you’ll know what the code is for.
• After applying the CSS, you’ll see four arrow signs appear in the corners of the button. Right now, they are black, but we’re going to replace that color with the page background color. Just update the color codes in the span styles accordingly.

So, you can see that there are so many steps to make your favourite animated button in WordPress. But, if you are not a coder and not interested in doing this hassle, there is an easy way. Go to the next method.

Method 2: Using BWD Creative Buttons Elementor Addon

You can make any kind of animated button using the BWD creative buttons elementor addon. You can choose from 100+ styles and can customize your own color and styles.

Just download and install the plugin and start doing your customization. Buy the plugin now.

Installation Process

• Install BWD Creative Buttons Elementor Addon using WordPress plugin installer or by uploading its files into the WordPress plugins directory.
• Activate the BWD Creative Buttons Elementor Addon through WordPress Plugins menu.
• Click the Plugins => Add New
• Click Upload Plugin and then Choose the bwd-creative-buttons.zip from your computer then click on the Install Now button.
• After activating, it doesn’t work without Elementor Page Builder plugin. Firstly, you should activate Elementor Page Builder.
• To activate newly installed plugin navigate the Plugins => Installed Plugins.
• Find the BWD Creative Buttons plugin from the list and press/click Activate.
• Congratulations! plugin has been installed and activated on your website.

Check different styles of buttons and choose the style you want. Simple!

You can also check our BWD Elementor Addons Bundle here.

Download the Code File.