Custom button Widget

Custom Button Widget Guide

The Custom Button widget helps you add clickable buttons to your website that can link to pages, open popups, start downloads, or trigger other actions. Whether you're guiding users to a product, form, or external link, this widget makes it easy to place buttons exactly where you need them—with full control over how they look and behave.

1. Choose a Button Style

What you’ll see:

• Button design options like Primary Call-to-Action, Outline Button, or Rounded Button

• A Continue with this template button

What to do:

• Click on a style to see how it looks

• Choose the one you like and click Continue to start customizing

2. Use the Editing Tabs

Once you've selected a style, you'll see three main tabs:

1. Content – Add your button text and set the link or action

2. Style – Customize how the button looks

3. Settings – Define how it works across devices or on interaction

3. Customize Your Button

Content Tab

Set the purpose and label of your button:

• Button Text – Type what the button says (e.g., “Buy Now”, “Get Started”)

• Link or Action – Choose what happens when someone clicks (go to a page, scroll to section, open popup, or download file)

• Icon (Optional) – Add a small icon before or after the text

• Open in New Tab – Option to launch links in a new browser window

This is where you define the main purpose of your button.

Style Tab

Change the appearance to match your site:

• Colors – Pick the background, text, and hover colors

• Font – Choose the font type, size, and weight

• Borders & Padding – Adjust border radius for rounded or square buttons, and fine-tune spacing

• Shadow & Effects – Add hover glow or click animations

• Alignment – Place the button left, center, or right

This helps your button look clean and consistent with your website.

Settings Tab

Control how the button works:

• Device Visibility – Show or hide the button on desktop, tablet, or mobile

• Click Animation – Add a bounce, fade, or ripple effect on click

• Sticky Mode – Option to keep the button visible on scroll

• Custom Code (Optional) – Insert extra CSS or JavaScript for advanced use

These features let you control behavior and responsiveness.

Helpful Tips

• Use the Content tab to set what the button does

• Use the Style tab to change how it looks

• Use the Settings tab to adjust how it behaves

• Always click "Save" after you finish editing