Button Settings

The Brandy theme provides comprehensive customization options for buttons, allowing you to fully customize its appearance and interactivity to match your website's design and enhance the user experience.

Here is the full outline of the settings available under the "Button Settings" section

1. Primary Button Settings

Hover Text Color

  • Field: Select the hover text color using the color picker.

Hover Background Color

  • Field: Select the hover background color using the color picker.

Box Shadow

  • Option: Toggle to enable or disable the box shadow.

  • Field: Select the box shadow effect using the dropdown.

  • Values: Default, Custom shadow, Small, Medium, Large, No shadow.

Shadow Color

  • Field: Select the shadow color using the color picker.

Shadow Settings

  • X Offset: Slider to adjust the horizontal position of the shadow.

  • Y Offset: Slider to adjust the vertical position of the shadow.

  • Blur: Slider to adjust the blur radius of the shadow.

  • Spread: Slider to adjust the spread radius of the shadow.

Hover Box Shadow

  • Option: Toggle to enable or disable the hover box shadow.

  • Field: Select the hover box shadow effect using the dropdown.

  • Values: Default, Custom shadow, Small, Medium, Large, No shadow.

2. Outline Button Settings

Hover Text Color

  • Field: Select the hover text color using the color picker.

Hover Background Color

  • Field: Select the hover background color using the color picker.

Box Shadow

  • Option: Toggle to enable or disable the box shadow.

  • Field: Select the box shadow effect using the dropdown.

  • Values: Default, Custom shadow, Small, Medium, Large, No shadow.

Shadow Color

  • Field: Select the shadow color using the color picker.

Shadow Settings

  • X Offset: Slider to adjust the horizontal position of the shadow.

  • Y Offset: Slider to adjust the vertical position of the shadow.

  • Blur: Slider to adjust the blur radius of the shadow.

  • Spread: Slider to adjust the spread radius of the shadow.

Hover Box Shadow

  • Option: Toggle to enable or disable the hover box shadow.

  • Field: Select the hover box shadow effect using the dropdown.

  • Values: Default, Custom shadow, Small, Medium, Large, No shadow.

3. Secondary Button Settings

Text Color

  • Field: Select the text color using the color picker.

Background

  • Field: Select the background color using the color picker.

Border Color

  • Field: Select the border color using the color picker.

Border Width

  • Field: Adjust the border width using the slider or input field (PX, EM, REM, %).

Box Shadow

  • Option: Toggle to enable or disable the box shadow.

  • Field: Select the box shadow effect using the dropdown.

  • Values: Default, Custom shadow, Small, Medium, Large, No shadow.

Shadow Color

  • Field: Select the shadow color using the color picker.

Shadow Settings

  • X Offset: Slider to adjust the horizontal position of the shadow.

  • Y Offset: Slider to adjust the vertical position of the shadow.

  • Blur: Slider to adjust the blur radius of the shadow.

  • Spread: Slider to adjust the spread radius of the shadow.

Hover Box Shadow

  • Option: Toggle to enable or disable the hover box shadow.

  • Field: Select the hover box shadow effect using the dropdown.

  • Values: Default, Custom shadow, Small, Medium, Large, No shadow.

Publish: Make sure to click "Publish" after making changes to save and apply the updated settings.

Last updated

Was this helpful?