Table Of Contents

Dual Button Widget

How to Use Dual Button Widget in Elementor

It is Dual Button Widget documentation. On the basis of the section, I’ll give you some instructions and pictures detailed to help you get started.

So, let’s start.

To Insert widget

Inserting Dual Button Widget

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above, drag the Elementor Dual Button Widget inside your current page.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website(such as a dual button). And in this regard, some handy sections in the tab will assist you a lot with the creative buttons.


Here, in this section, you can set button size, alignment, and width. Specially, you can add text between the buttons.

button widget settings

Go to the Content tab > Button.

Button A

This section will allow you to shape or modify the first button. You could add text, link, alignment, and icon. In addition, you on/off the two switcher buttons on the button widget.

Dual Button Widget indivisual button setup

Simply go to the Content tab > Button A. Here, you can customize the first button of the Dual Button Widget using logo, text, spacing, link, etc.

Button B

dualbutton 4 - BdThemes

It is as similar as Button A. Just go to the Content tab > Button B. Here, you can customize the second button of the Dual Button Widget using logo, text, spacing, link, etc.

Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


Both in the Normal mode and Hover mode, you could style the button widget. Go to the Style tab > Button and have a look at the screenshot below.


dualbutton style 1 - BdThemes

Apply some padding & border-radius to make the button appear unique.


dualbutton style 2 - BdThemes

Do the same thing for the hover mode. Just add some deeper color to get a hover effect on the Elementor Dual Button Widget.

Button A

This section will let you set a few Effects and work in both Normal and Hover mode.


Elementor Dual Button Widget button A

Pick a brighter color for the text and an image for the background. It’s possible.

Just, go to the Style tab > Button A and see what happens.


dualbutton style 4 - BdThemes

Button B

It is quite similar to Button A to style Button B. Simply go to the Style tab > Button B and look at the screenshot below.


dualbutton style 5 - BdThemes

Same thing as Button A but with no image in the background. Instead, use gradient color for the second button of the button widget.


dualbutton style 6 - BdThemes

Button A Icon & B Icon

These sections are pretty similar to Button A and Button B.

dualbutton style 7 - BdThemes

Come to the Style tab > Button A Icon & Button B Icon.

Middle Text

dualbutton style 8 - BdThemes

Go to the Middle Text Section and check them all.

Video Assist

Finally, I hope you’ve noticed that all the sections are pretty similar and easy to control. If you need more support you can watch the video embed above and furthermore to get ideas, you can visit our demo page linked here.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.