dual button

How to add dual button using Elementor

Do you want to add a dual button with Elementor on your website pages? Adding buttons to a website is a very common and important thing. Using a button you can add a link to the most important section of your website. Sometimes you need to two-button side by side for any special purposes. Using the Elementor page builder plugin you can add two buttons side by side but this will give you limited controls.

Here in this article, we will guide you to the easiest way to add a dual button on your Elementor website.

Things you need to create a restaurant menu

  • Elementor – To customize your website without coding you need to install and activate the Elementor website builder plugin.
  • Absolute Addons – The Dual Button widget is available on the Absolute Addons plugin so you need to install and activate the plugin.

Add dual button using Elementor

To use the Dual Button widget, first you need to create a section by clicking on the “+” icon on Elementor and then from the block section of the left bar search for Dual Button. Drag the Dual Button block and drop it into your created section.

dual button

Under the Content tab from the template menu, you can choose the Dual Button presets. There are two presets available. You can see the demo from here.

dual button

After selecting your presets go to the dual button option to set up the buttons. Here you can set up your primary button, secondary button, and connector.

First, you can set primary and secondary button types. The button types are –

  • Default
  • Info
  • Success
  • Warning
  • Danger

You can show or hide the button outline and set the button radius as –

  • None
  • Round
  • Rounded
  • Full
dual button

After that set the button HTML tag, button text, link, and button size. You can also add an icon on your button and set the icon position. Set button alignment and button layout as horizontal or vertical.

dual button

Step 2

Move on to the Style tab where you will find different style options to style up the section.

dual button

Primary Button

Set primary button typography, background color, border type, border-radius, box-shadow, padding, and margin for normal condition.

dual button

For hover and focus conditions, you can set the background color, text color, border type, and box-shadow.

dual button

Similarly, you can apply all these styles on your secondary button too.


You can set the primary and secondary icon typography, width, height, background color, border type, border-radius, and others.


Set connector typography, height, width, background color, text color, and others from here.

That’s it! Your section is ready to use.

Wrapping Up 

Following the process, you will be able to add dual button on your Elementor website. You can see our other articles to learn How to display news posts to your Elementor website

How to create a team carousel with Elementor

Display your services with Elementor in a unique way on your website

We hope this article will help you. If you like this article, please like our Facebook page and subscribe to our Youtube channel.