Home » Tutorials » How to Create Elementor Animated Buttons
That simple, static “Learn More” button on your homepage isn’t just a button, it’s a gateway. It’s the single most important step between a casual visitor and a loyal customer.
But what if no one is clicking it?
Often, the problem isn’t your offer; it’s your presentation. In a crowded digital space, a flat, lifeless button is easy to ignore. This is where animated buttons come in. They aren’t just a gimmick; they’re a powerful design tool. A subtle pulse, a smooth color fade, or a creative hover effect can be the one thing that draws a user’s eye and invites them to engage.
If you’re using Elementor, the drag-and-drop page builder powering over 10 million sites.
The problem? Creating these effects in Elementor traditionally required complex custom CSS or juggling multiple plugins. So, animated buttons are the wake up call.
This article will show you how to create Elementor animated buttons using the Creative Buttons Addon of Master Addons. Thus, turning your static calls-to-action (CTAs) into conversion-driving high-performers.
Before we jump into the “how,” let’s cover the “why.” Animation, when used correctly, serves three distinct purposes.
With great power comes great responsibility. It’s easy to overdo it. Before you add a single effect, keep these best practices in mind.
Let’s get to the fun part. We’ll build our perfect Elementor animated button step-by-step using the Master Addons Creative Buttons addon.
Before you can start creating Elementor animated buttons, you’ll need to enable the Creative Buttons Addon in Master Addons. Here’s how:
1. Navigate to Your WordPress DashboardGo to your WordPress admin dashboard.
2. Access Master Addons SettingsFrom the sidebar, find and click on Master Addons.
3. Enable Creative ButtonsIn the Addons section, locate Creative Buttons and toggle the setting to “On.”
Once enabled, you can start using the Creative Buttons widget in your Elementor editor, unlocking a range of customization options to create unique Elementor animated buttons.
Now that the Creative Buttons Addon is enabled, it’s time to add your first animated button to the page. Follow these simple steps:
1. Open Elementor EditorNavigate to the page or post where you want to add the button and click Edit with Elementor.
2. Drag and Drop the Creative Button WidgetIn the Elementor editor, search for the Creative Button widget in the left panel. Drag it onto the section of your page where you’d like the button to appear.
3. Explore the Creative Button OptionsOnce the button is added, you’ll see three main tabs in the left-hand panel: Content, Style, and Advanced. These tabs give you full control over the button’s appearance and functionality, allowing you to customize it to match your design.
Now you’re ready to start configuring the button’s settings!
The Content tab allows you to define the essential elements of your button, from text to link and icons. Here’s how to set it up:
Button Effects: Under Style Presets, you’ll find a wide variety of over 20 animation effects that you can apply to your button. These effects will animate the button on hover or click, adding a dynamic touch to your design.
Button Alignment: Choose the alignment for your button—left, center, or right—so it fits seamlessly within your layout.
Button Text: Enter the main text that will appear on the button.
Alternative Button Text: Customize the Alternative Button Text, which will appear when users hover over the button. This is a great way to add a different message or call to action on hover.
Button Link: Set a link for your button. Users will be redirected to the URL you specify when they click on it.
Add an Icon: You can add an icon to the button by selecting one from the icon library. Customize the icon’s position and spacing to suit your design.
These settings provide you with the flexibility to create a button that is functional and tailored to your website’s needs.
The Style tab offers a wide range of options to personalize the look of your button. Here’s how to fine-tune its appearance:
Button Width: Adjust the width of the button to ensure it fits within your layout, whether it’s full-width or custom-sized.
Typography: Customize the button’s font style, size, weight, and letter spacing to match your site’s design.
Padding: Set the padding to control the space inside the button, ensuring that the text and icon are positioned perfectly.
You can customize the button’s appearance for both its normal and hover states:
Text Color: Choose different text colors for the normal and hover states.
Icon Color & Size: Adjust the color and size of the icon for both normal and hover effects.
Background Color: Set the button’s background color for normal and hover states. You can also apply gradient backgrounds for a more dynamic look.
Border Type, Width, and Color: Add a border around the button, selecting the border type (solid, dashed, etc.), width, and color for both normal and hover states.
Border Radius: Customize the button’s corners with rounded edges by adjusting the border radius.
Box Shadow: Add depth to the button by applying a box shadow for the normal and hover states. This effect makes the button stand out on the page.
By using the Style tab, you can ensure that your button not only functions well but also fits perfectly within your site’s overall design aesthetic.
To get a deeper understanding of how each of the setting mentioned above works we suggest you check out our full documentation on how to create Creative buttons which includes more indepth explanations and videos tutorials.
The Advanced tab gives you access to additional effects and customization options that can further enhance your button’s functionality and interactivity. Here’s a look at what you can do:
Take your button design even further by combining it with other Master Addons features. You can use extensions like Floating Effects and Parallax alongside your Creative Button for added visual impact.
Add transform effects, such as scaling or rotating, to the button on both its normal and hover states. This feature lets you create engaging animations that make your button more interactive and dynamic.
Introduce a parallax scrolling effect, where the button moves at a different speed than the rest of the page when the user scrolls. This adds a unique, immersive touch to the button’s movement.
Use a reveal animation to make your button gradually appear as the user scrolls down the page, adding an extra layer of interactivity and intrigue.
Control when and where your button appears using Display Conditions. You can set rules that determine the button’s visibility based on specific user actions or conditions, like on certain devices or during a particular time frame.
Make your button float above the page, giving it a more dynamic, interactive feel. Floating effects allow the button to hover over the content, moving slightly or gently in response to user interaction.
Add tooltips to your button for additional information. When a user hovers over the button, a small text box can appear with more details or a helpful description.
These advanced features provide endless creative possibilities, enabling you to build buttons that not only look great but also interact meaningfully with your users.
A button is more than just a link; it’s the engine of your website. By replacing your static, overlooked buttons with thoughtfully designed animations, you create an experience that is more engaging, more intuitive, and more effective.
You don’t need to be a CSS wizard to do it. With the Master Addons Creative Buttons addon, you have all the tools you need to create Elementor animated buttons. The same buttons that don’t just get seen, they get clicked.
So, what’s the first button you’re going to animate?
The addon is available in both free and pro versions as part of the freemium Master Addons for Elementor plugin. The free version includes basic creative button styles and effects, while the pro version unlocks advanced types, additional hover animations, and premium extensions like enhanced parallax and floating effects for more complex designs.
You need WordPress 5.0 or higher, Elementor (free version) 3.0+, and PHP 7.4 or greater. It’s compatible with most themes, but ensures no conflicting addons are active to avoid loading issues. The plugin is lightweight and doesn’t require additional installations beyond the base setup.
Yes, it’s fully compatible with popular themes like Astra, OceanWP, and GeneratePress, as well as other plugins. For best performance, deactivate unused widgets via the Master Addons dashboard to prevent script overlaps and optimize site speed.
All button effects are mobile-optimized out of the box, automatically adjusting for touch interactions and smaller screens. You can fine-tune responsiveness in the Style tab by setting device-specific padding, typography, and animation intensity to ensure smooth performance on tablets and phones without custom code.
This usually occurs if the addon isn’t enabled or if there’s a plugin conflict. Go to WordPress Dashboard > Master Addons > Addons, toggle Creative Buttons “On,” and save changes. If it persists, deactivate other addons temporarily, clear your site’s cache, and check for Elementor updates.
Get Access to 70+ Custom Elements & Extension
No, I Like Complexity