BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Dual Button Free

How to set up and style the Dual Button widget in Elementor.

Dual Button places a primary and a secondary button in one widget, with an optional small connector such as the word or between them. Each button has its own text, link, icon and colors. Use it where visitors get two choices, such as buying or viewing a demo.

Part of: Bright Addons (free).

See the widget page and live demo

Set it up

  1. Drag Dual Button from the Bright Addons category onto the page.

  2. In Primary Button, type the Text, set the Link and pick an Icon if wanted.

  3. Do the same in Secondary Button.

  4. In Layout, switch on Connector and edit the Connector Text if a divider is wanted.

  5. Set Direction, Alignment and Space Between for each device.

  6. Open the Style tab and set the shared button shape in Buttons, then the colors in Primary Button and Secondary Button.

Content options

Primary Button

Option What it does
Text The label of the first button.
Link The address the first button opens.
Icon An optional icon shown inside the button.
Icon Position Places the icon before or after the text.

Secondary Button

Option What it does
Text The label of the second button.
Link The address the second button opens.
Icon An optional icon shown inside the button.
Icon Position Places the icon before or after the text.

Layout

Option What it does
Connector Shows a small badge between the two buttons.
Connector Text The text inside the connector. The default is or.
Direction Shows the buttons side by side or stacked, per device.
Alignment Aligns the pair left, center, right or justified, per device.
Space Between Sets the gap between the buttons, from 0 to 60 pixels.
Bright Addons Pro

Like this free widget? Get 80 more with Pro

Pro adds 80 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $18 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Buttons

    typography, padding, border radius, border width and icon spacing shared by both buttons.

  • Primary Button

    text, background and border colors for normal and hover.

  • Secondary Button

    text, background and border colors for normal and hover.

  • Connector

    text color, typography, background color and size (shown when Connector is on).

Tips

  • A button with no text and no icon is not printed, so the widget can also show a single button.

  • A button with an empty Link is printed as plain text styled as a button, not as a link.

  • The connector only appears when Connector is on and Connector Text is not empty.

  • Icon Position appears after an icon is chosen.

Questions and answers

Can each button have a different color?

Yes. The Style tab has a Primary Button and a Secondary Button section, each with normal and hover colors.

Can the buttons stack on mobile?

Yes. Direction is a responsive control, so choose Stacked for the mobile view.

Can I change the or text between the buttons?

Yes. Switch on Connector and type any short text in Connector Text.

Can the two buttons fill the full width?

Set Alignment to Justified and the buttons stretch to fill the available width.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides