Advanced Button

Estimated reading: 3 minutes 407 views

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.

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.
Advanced Button: Content Settings
Advanced Button: Content Settings

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.
Advanced Button: Icon Settings
Advanced Button: Icon Settings

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.
Advanced Button: Separator Settings
Advanced Button: Separator Settings

Style

Normal

  • Background Type: Choose the background type, either color or gradient.
  • Border Type: Choose from the following options for border type.
Advanced Button: General Style Settings(Normal)
Advanced Button: General Style Settings(Normal)

Hover

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

Advanced Button: General Style Settings(Hover)
Advanced Button: General Style Settings(Hover)
  • 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.
Advanced Button: General Style Settings
Advanced Button: General Style Settings

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.

Advanced Button: Content Style Settings
Advanced Button: Content Style Settings

Title

  • Padding: Set the padding of the title.
  • Typography: Set the typography.
  • Text Shadow: Add a Text shadow effect to the title.
Advanced Button: Title Style Settings
Advanced Button: Title Style Settings

Description

  • Typography: Set the description typography.
  • Alignment: Set the alignment of the description.
Advanced Button: Description Style Settings
Advanced Button: Description Style Settings

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.
Advanced Button: Icon Style Settings
Advanced Button: Icon Style Settings

Separator

  • Color: Set the color of the separator.
  • Hover Color: Set the hover color of separator.
  • Width: Set the width of the separator.
Advanced Button: Separator Style Settings
Advanced Button: Separator Style Settings

Check out the Demo page of Advanced Button.

Share this Doc

Advanced Button

Or copy link

CONTENTS