Custom Button Widget Guide

The Custom Button widget allows you to easily add clickable buttons to your website with various actions. Here's how to effectively use it:

1. Choose a Button Style

• Design Options:
  • Primary Call-to-Action
  • Outline Button
  • Rounded Button
• Action: Click on a style, preview it, and proceed to customization.

2. Use the Editing Tabs

• Content: Add text and set the button's action.
• Style: Customize the button's appearance.
• Settings: Configure its behavior across devices.

3. Customize Your Button

Content Tab

• Button Text: Define what the button says (e.g., “Buy Now”).
• Link or Action: Set the action on click (navigate, scroll, open popup, download).
• Icon (Optional): Add an icon before or after the text.
• Open in New Tab: Option to launch links in a new browser window.

Style Tab

• Colors: Choose background, text, and hover colors.
• Font: Select font type, size, and weight.
• Borders & Padding: Adjust border radius and spacing.
• Shadow & Effects: Add hover glow or click animations.
• Alignment: Position the button (left, center, right).

Settings Tab

• Device Visibility: Show or hide the button on different devices.
• Click Animation: Add effects like bounce or fade.
• Sticky Mode: Keep the button visible on scroll.
• Custom Code (Optional): Include additional CSS or JavaScript.

Helpful Tips

• ✅ Use the Content tab for button functionality.
• 🎨 Use the Style tab to modify appearance.
• ⚙️ Use the Settings tab for behavior adjustments.
• 💾 Remember to click "Save" after editing!