How to add Creative Buttons

How to Add and Customize the Creative Buttons Element in Elementor #

The Creative Buttons Element by Master Addons is a specialty widget designed to create highly stylish and animated call-to-action buttons using a variety of unique hover effects. This is ideal for making essential links stand out and improving user engagement.

Using the Creative Buttons Element, you can:

• Select from numerous custom Button Effects (e.g., Winona, Ujarak, Rayen, Nanuk, Quidel, Shikoba).
• Define the primary Button Text and an Alternative Button Text that appears during the hover animation.
• Include and position a customizable Icon.
• Fully control the typography, colors, padding, borders, and shadows for both the Normal and Hover states.

So, let’s see how to add and customize this element.

Adding and Configuring the Creative Buttons Element #

Follow these steps to add and configure the Creative Buttons Element on any page of your website.

Step 1: Create or Edit a Page #

1. From your WordPress dashboard, go to Pages → Add New to create a new page. You can also select an existing page and click Edit.
2. Next, click the “Edit with Elementor” button.

Step 2: Find the Creative Buttons Element #

1. In the left-hand Elementor panel, use the search bar to find “Creative Buttons.”
2. Drag and drop the addon onto your desired section of the page.

Step 3: Customize the Creative Buttons Settings #

After placing the addon, you’ll find the customization sections in the left-hand panel, primarily under the Content and Style tabs.

Content Tab #

This is where you define the button text, icon, link, and hover effect.

Style Presets: #

• Button Effects: Choose the animation style for the hover effect (e.g., Winona, Tamaya, Nina, Antiman, Itzel).
• Button Alignment: Align the button element within its column: Left, Center, or Right.

Button Controls: #

• Button Text: Enter the primary visible text of the button. You can use the Write with AI feature.
• Alternative Button Text: Enter text that appears during the hover effect (only visible with certain effects). You can use the Write with AI feature.
• Link URL: Enter the destination URL for the button.
• Icon: Select an icon from the Icon Library or Upload SVG.
• Icon Position: Set the icon position relative to the text: Before or After.
• Icon Spacing: Adjust the space between the icon and the text.

Style Tab #

This is where you control the visual appearance of the button and its components.

Button Styles: #

• Width (px): Set a fixed width for the entire button element.
• Typography: Control the font settings for the button text.
• Button Padding: Adjust the inner spacing (size) of the button.
• Normal / Hover: Set the following for the button in both its default and hovered states:
  • Text Color
  • Icon Color
  • Icon Size (px)
  • Background Color
• Border Type / Border Radius: Set the border style and rounded corners for the button container.
• Box Shadow: Apply a shadow effect to the button.

Step 4: Save and Publish Your Page #

Once you’ve customized everything to your liking:

1. Click the “Publish” button (if it’s a new page) or “Update” (if editing an existing page).
2. Visit your page on the frontend and hover over the button to test the chosen creative effect.