Image Button Widget Tutorial

Intro

Premium Image Button Widget for Elementor allows you to create interactive buttons with an image background. There are a lot of customization options that allow to take full control over the button and make it interactive.

Click here to check Premium Image Button Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• Text
• Link Type
• Hover Effect
• Icon [Enable/Disable]
• Button Size
• Button Alignment
• onClick Event

Button

• Text: Enter button text in the text box that will be displayed on the button e.g. Click Me.
• Link Type: Add button’s link whether if it was a custom URL or you can add an existing page link.
• Link: Enter the URL in the text box.
  • Check “Open in New Window” box if you want the link to be opened in a new tab.
  • Check “Add Nofollow” if you don’t want your page to be indexed by search engines.
• Hover Effect: Choose the hover effect for the button. You can choose from the following options:
  • None
  • Background Slide
    • Top to Bottom
    • Bottom to Top
    • Right to Left
    • Left to Right
  • Diagonal Slide
    • Bottom Left to Top Right
    • Top Right to Bottom Left
    • Top Left to Bottom Right
    • Bottom Right to Top Left
  • Icon Slide
    • Top to Bottom
    • Bottom to Top
    • Right to Left
    • Left to Right
  • Overlap
    • Horizontal
    • Vertical
  • Grow
    • Detect Mouse Position: Enable this option to trigger the grow effect from the mouse position on the button.
• Icon: [Enable/Disable Icon Option]
  • Icon: Choose from a list of Font Awesome icons.
  • Icon Position: Set the icon position, before or after the button text.
  • Icon Size: Set the size of the icon, you can drag the bar to set the icon size or enter the value.
  • Icon Spacing: Set the space between the icon and the text, you can drag the bar to set the icon space or enter the value.
• Size: Set the size of the button. You can choose between small, medium, large and block.
• Alignment: Set the button alignment, you can set as the center, left or right.
• onClick Event: Use this option if you want to add custom functionality to the button. You can add the javascript or jquery code in the text box.

Style

Button

• Typography: Set the typography of the text in the button.
• There are two tabs, normal and hover. You can click on these tabs to adjust the styling of the button.
• Text Color: Select a color for the button text.
• Icon Color: Set the color of the icon.
• Background Type: Select the background type. You can choose from classic or gradient.
  • Classic
    • In classic tab, you can set the background color or you can upload an image or select from the media library. There are different options to set the styling of the image such as its position, repeat, and size.
  • Gradient
    • In the gradient tab, you have different options such as setting the colors, gradient location, gradient angle, etc.
• Border Radius: Increasing the border-radius will add circular corners to the button container. You can adjust the border-radius in pixels, % or em.
• Advanced Border Radius: Apply custom radius values for Elementor Image Button widget box. Get the radius value from here.
• Border Radius: Insert border radius values.
• Button Shadow: Add a shadow around the button. Adjust the shadow using the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset
• Margin: Margin is the space between the button container and the rest of the content. Adjust the margins in pixels, em or %.
• Padding: Padding is the space between the button text and the edge of the buttons container. Increasing the padding will make the button larger. Adjust the padding using pixels, em or %.