Dual Button

Estimated reading: 3 minutes 787 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

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

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

Text: Give the connector icon text.
Icon: Choose an icon for the separator.

Style

General

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

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

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.

CONTENTS