Advanced Button

This widget offers an optimal solution for individuals looking for interactive buttons that effortlessly combine headlines and descriptions into a unified button. With its adaptable features, users can create visually appealing buttons that instantly capture attention and effectively communicate messages, guiding users toward desired outcomes.

The “Advanced Button” widget features the following controls.

Content

Advance Button

• Layout: Set the layout of the advance button to either the right or bottom.
• Title: Write the title of the Advance button.
• Description: Write the description of the advance button.
• Link: Set the link type and add a link.

Icon

• Icon: Choose an icon from the options.
• View: Set the view of the icon from default, stacked, or framed.
• Icon position: Adjust the icon position to either left or right.

Separator

• Show Separator: Enable to show a separator
• Type: Set separator type from solid, dashed, or dotted.
• Size: Control the size of the separator.
• Alignment: Set the alignment of the separator.

Style

Normal

• Background Type: Choose the background type, either color or gradient.
• Border Type: Choose from the following options for border type.

Hover

Styling control for hover state are available under this section. These settings will be applied when someone hovers the button box.

• Hover Animation: Choose any hover animation from the following options.
• Padding: Set the padding.
• Border radius: Set the border radius of the advance button.
• Spacing: Set the spacing for the advance button.
• Box Shadow: Set the box shadow of the advance button.

Content

• Title color: Set the color of the title.
• Description color: Set the color of the description.

Hover

Styling control for hover state are available under this section. These settings will be applied when someone hovers the button box.

Title

• Padding: Set the padding of the title.
• Typography: Set the typography.
• Text Shadow: Add a Text shadow effect to the title.

Description

• Typography: Set the description typography.
• Alignment: Set the alignment of the description.

Icon

• Color: Set the primary color of the icon.
• Padding: Set the padding.
• Size: Set the size of the icons according to your choice.
• Spacing: Adjust the spacing between the icon and the button’s title.
• Border Type: Set the border from the following options.
• Border Radius: Set the border radius of the icon.

Separator

• Color: Set the color of the separator.
• Hover Color: Set the hover color of separator.
• Width: Set the width of the separator.

Check out the Demo page of Advanced Button.