1. Home
  2. Docs
  3. Content Elements
  4. Dual Button

Dual Button SA Element

The dual button is a powerful WP extended button generator element by Elementor Addons for Elementor. You can create some stunning dual buttons by using this lightweight Dual Button Element within Elementor Page very easily. Here in this tutorial, you’re going to explore all about Dula Button and see how to work with this incredibly important element. So let’s get straight into it:

 

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Dual Button Element

 

 

»Content

 

Dual Buttons

⇒Left

→Text: Type the text of your Button on the left. You can customize the text in your own language that will be shown as your left Button Text.

→Link: This is where you can add your Desire link or URL so that your left button can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

→Icon: If you want to add an icon within the left button, then select the icon you want from here. You can choose from the icon library or upload an SVG as an icon.

→Icon Position: Set the icon position either before or after the left button text.

→Icon Spacing: Generate some space between the icon and the button text manually.

 

⇒Connector

→Hide Connector: Do you want to hide the connector or show them in between the buttons? Select your desired setting by enabling or disabling the toggle button.

→Connector Type: If you want to show the connector, here you can choose the connector type either text connector or icon.

→Text: Type the text for the connector to come with the textual format.

→Icon: And select the icon you want from here if you want to add an icon as the connector. You can choose from the icon library or upload an SVG as an icon.

 

⇒Right

→Text: Type the text of your Button on the right side. You can customize the text in your own language that will be shown as your right Button Text.

→Link: This is where you can add your Desire link or URL so that your right button can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

→Icon: If you want to add an icon within the right-sided button, then select the icon you want from here. You can choose from the icon library or upload an SVG as an icon.

→Icon Position: Set the icon position either before or after the right button text.

→Icon Spacing: Generate some space between the icon and the button text manually.

 


»Style

 

Common

⇒Padding: Set the padding value for the top, right, bottom and left around the button for different dimensions. You can link the values together or customize them individually.

⇒Space Between Buttons: Set a custom space between the buttons.

⇒Typography: Set the typography options for the dual button text.

⇒Horizontal Alignment: Set the horizontal alignment of the dual button either left, center or right.

⇒Vertical Alignment: Set the vertical alignment of the dual button either left, center or right. This value only works if both of the buttons have a different height.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

 

Left Button

⇒Padding: Set the padding value for the top, right, bottom and left around the left button for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the left button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the left button for different dimensions.

⇒Typography: Set the typography options for the left button text.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Background Color: Customize the left button background color for Normal & Hover view.

⇒Text Color: Set a custom color for the left button text in both Normal & Hover view.

 

Connector

⇒Text Color: Set a custom color for the connector text.

⇒Background Color: Customize the button connector background color manually.

⇒Typography: Set the typography options for the button connector.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Right Button

⇒Padding: Set the padding value for the top, right, bottom and left around the right button for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the right button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the right button for different dimensions.

⇒Typography: Set the typography options for the right button text.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Background Color: Customize the right button background color for Normal & Hover view.

⇒Text Color: Set a custom color for the right button text in both Normal & Hover view.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Dual Button Element.


Was this article helpful to you? Yes No

How can we help?