How to add Creative Buttons

A plain button gets clicked. A button that moves a little on hover gets noticed first. The Elementor Creative Buttons widget from Master Addons gives you the second kind: 20+ named hover effects, icon support, and full styling, and you never open a CSS file to get there.

Below, we’ll add the widget, walk through every Content control, then style the button so it looks like your brand instead of the Elementor default. By the end you’ll have a call-to-action button like this one.

What the Creative Buttons widget does #

Think of it as Elementor’s default button with a lot more room to play. The part people actually come for is the Button Effects dropdown: a set of 20+ hover animations (Winona, Ujarak, Wayra, and a dozen more) that reveal text, slide an icon in, or wash color across the button when someone hovers over it.

Past that, you get an icon picker with position and spacing controls, an alternative label that shows up during certain effects, a wrapper link toggle, and a Style tab covering color, border, padding, and shadow. It ships in the free Master Addons collection, so it works on any Elementor site. The full widgets and extensions list shows what else comes with the plugin.

Prefer to watch it built first? Here’s the widget in action before we break down each setting.

Before you start #

• WordPress with the Elementor page builder installed and active.
• Master Addons for Elementor installed and active. New to the plugin? Run through the installation guide first.
• A page or template open in the Elementor editor.

How to add the Creative Buttons widget in Elementor #

This part is quick:

1. Open a page with Elementor and click the widget panel icon (the grid) in the top-left.
2. Type Creative Buttons in the search box, or scroll down to the Master Addons category.
3. Drag the Creative Buttons widget onto your canvas.

It drops in with placeholder “Click Here” text, ready for you to change.

Content settings explained #

Select the button and open the Content tab. Everything here controls what the button says and where it points.

Button Effects (20+ hover animations) #

This is the setting you’ll spend the most time on. Pick a preset from the dropdown and the button animates on hover, no code involved. Your choices:

Default, Winona, Ujarak, Wayra, Tamaya, Rayen, Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite, and Shikoba.

They don’t all behave the same way. Some slide an icon in, some swap the label for your alternative text, some wash a fill across the button. Click through a few in the live preview before you settle, since the names won’t tell you much on their own. If you want something safe and modern, start with Winona or Ujarak.

Here’s that same button caught mid-hover on the Winona effect, swapping in the alternative text as the color shifts:

Button Alignment and Text Alignment #

Button Alignment sets where the button sits in its container (Left, Center, Right). Button Text Alignment sets where the label sits inside the button. Both are responsive, so you can center the button on mobile while keeping it left-aligned on desktop using the device toggle.

Button Text and Alternative Button Text #

The Button Text is your main label, say “Get Started”. The Alternative Button Text (“Go!” in the screenshot) is the second label that flips in during the effects that reveal one. Keep it short. It gets less room than the main text, and a long alternative will look cramped or get cut off.

Link URL #

Drop the button’s destination in Link URL. The gear icon next to it holds the link options: open in a new tab, add nofollow, and so on. For an internal link, just paste any page on your own site.

Icon, Icon Position, and Icon Spacing #

An icon gives the action a visual cue, an arrow for “Get Started”, a cart for “Buy Now”. Open the Icon control and pick one. Master Addons bundles eight premium icon libraries, so there are thousands to choose from right inside Elementor.

• Icon Position: put the icon Before or After the text. An arrow trailing the label (“Get Started →”) reads as forward motion, which is why it’s the common choice for CTAs.
• Icon Spacing: the gap between icon and text, in pixels.

Wrapper Link #

Turn on Wrapper Link when you want a bigger area to be clickable, not just the button. It’s useful inside a card or banner where the whole block should respond to a click. It works the same way as the Master Addons Wrapper Link extension.

Style settings explained #

Switch to the Style tab and open the Button Styles section. Everything below lives there.

• Width: set a fixed width, or leave it blank and the button sizes to its text.
• Typography: font family, size, weight, letter spacing, and transform for the label.
• Button Padding: the breathing room around the text. Bump it up a little on mobile, since a bigger tap target is easier to hit with a thumb.
• Border Type and Border Radius: pick a border style and round the corners. Around 8px reads as soft and modern without looking like a pill.
• Box Shadow: adds depth so the button lifts off the page.
• Icon Size: scales the icon on its own, separate from the text size.

Normal and Hover colors #

The color controls split into Normal and Hover states, and you set Text Color, Background Color, and Icon Color for each. A different hover background is the easiest way to add feedback on top of whatever Button Effect you picked. One thing to check: read the label in both states. A color that looks great on Normal sometimes disappears against the Hover background.

Tips for high-converting buttons #

• Use action language. “Get Started”, “Claim Your Offer”, and “Download Free” all beat “Submit” or “Click Here”.
• One primary button per section. Two CTAs fighting for the same click usually means neither wins. Let the main action stand out with color and effect.
• Match the effect to the brand. Subtle effects like Winona suit corporate sites. Save the bolder ones for landing pages and promos.
• Keep contrast high. If the label is hard to read, the animation doesn’t matter.
• Check it on mobile. Hover doesn’t fire on a touchscreen, so the resting state has to look finished on its own.

Need a heading and description sitting with the button? The Call to Action widget packs all three into one block. For styled inline text links instead of buttons, look at Creative Links. And if you just want design ideas, our roundup of Elementor animated buttons has more.

Frequently Asked Questions #

Wrapping up #

The Elementor Creative Buttons widget turns a basic link into an animated, on-brand call to action in a few minutes. Pick your effect, add an icon, set the colors, and you’ve got a button that pulls clicks without a line of custom code. From here, the rest of the Master Addons widget library is worth a look.