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

In today’s fast-paced digital world, a simple static button just won’t cut it. Animated buttons are the secret sauce to grabbing attention, boosting engagement, and guiding visitors to take action on your WordPress website. 

Whether you want to highlight a “Buy Now” call-to-action, draw eyes to a newsletter signup, or add a playful touch to your navigation, animated buttons can transform user interactions from mundane to memorable.

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

• Using a Page Builder (Elementor) and CSS Code
• Using an addon

Let’s dive in and turn those bland buttons into dynamic design elements that elevate your site’s user experience!

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

This method is for professionals who know custom coding and have advanced knowledge. But, if you are a beginner and don’t have any coding knowledge you can directly move to Method 2.

• First, we’ll create a new page. Let’s name the page Animated Awesome Button. Now click Publish, then click on Edit with Elementor. From the page settings, turn on Hide Title and set the page layout to Elementor Canvas to hide the header and footer.
• Next, we’ll add a container and change the minimum height to 100%. Set both Justify Content and Align Items to Center.
• Now, let’s change the background color. All the color codes used in this tutorial, along with the CSS and JavaScript code, are provided in the below file.
• Now we’ll add a button widget and name it 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.