Widgets

Dual Button

Estimated reading: 3 minutes 790 views

The Dual Button widget is handy for your website. It lets you put two good-looking buttons on your page, and you can choose how they look. You can even add a personalized separator between the buttons. These buttons will make your website look cooler and more modern, and they’re a fun way for visitors to interact with your site.

Content

Dual Button: General Settings
Dual Button: General Settings
  • Layout: Set Horizontal and Vertical layouts of the buttons.
  • Alignment: Align the button to the left, center, right, or justified with its column.
Dual Button: Button 1 Settings
Dual Button: Button 1 Settings
  • Text: Enter the button’s text.
  • Link: Set the URL for the button’s link. Set the link to either open in a new window or to add nofollow to the link.
  • Icon: Select a FontAwesome icon to display on the button.
  • Icon Position: Set the icon before or after the button text.
  • Spacing: Adjust the space between the icon and the button text.
Dual Button: Separator Settings
Dual Button: Separator Settings
  • Text: Give the connector icon text.
  • Icon: Choose an icon for the separator.

Style

General

Dual Button: Animation Settings
Dual Button: Animation Settings
  • Animation: Click on the Hover tab to set a Hover Animation.
  • Padding: Change the padding settings of the button.
  • Box Shadow: Set options to apply a box shadow on the button.

Button

Dual Button: Button Style Settings
Dual Button: Button Style Settings
  • Typography: Change the default typography options for the button’s text.
  • Text Color: Select the color of the button’s text.
  • Icon Color: Choose a color for the icon.
  • Background Type: Select the button’s color for Normal and Hover states.
  • Border Type: Select the type of border to use around the button.
  • Width: Control the thickness of the border around the button.
  • Color: Choose the border’s color.
  • Border Radius: Set the border radius to control corner roundness.
  • Padding: Change the padding settings of the first button.

Separator

Dual Button: Separator Style Settings
Dual Button: Separator Style Settings
  • Size: Set the size of the separator icon.
  • Typography: Set the typography options for the separator text.
  • Color: Choose a color for the separator icon and text.
  • Background Color: Choose the background color of the separator.
  • Border Radius: Set the border radius to control corner roundness.
  • Box Shadow: Set options to apply a box shadow on the button.

Check out the Demo page of Dual Button.

Share this Doc

Dual Button

Or copy link

CONTENTS