Button widget

Buttons are one of the most important elements on your website. They act as calls to action (CTAs)—guiding visitors toward key actions such as signing up, purchasing, or exploring more content. A well-designed button can make your site more user-friendly, engaging, and conversion-focused.

Adding a Button

  1. Open the Widget Panel.
  2. Under Basic Widgets, find the Button widget.
  3. Drag and drop it anywhere on your page.

You can place buttons inside columns, sections, or over images—giving you complete flexibility in design.

Managing the Button Widget

When you click on a button, you’ll also see quick actions in the widget toolbar:

  • Edit → Opens Button Settings.
  • Link icon → Quickly edit link target.
  • Styling → Adjust the styling of the button.
  • Alignment → Adjust left, center, or right alignment.
  • Animation → Add entrance effects (e.g., fade, slide, zoom etc.).
  • Copy → Duplicate your button with the same style. It's added to the clipboard for future use.
  • Delete → Remove the button.

Button Settings

Once placed, click on your button to open the Button Settings panel.

Here you can:

  • Edit text → Change the label to something action-driven (e.g., Get Started, Buy Now, Learn More).
  • Add second line of text → Useful for longer CTAs like Start Free Trial with a subline like No credit card required.
  • Add an icon → Place an icon before or after the text to make the button more visual.
  • Add a link → Redirect users to another page, external URL, section, or popup when clicked.

💡 Design tip

Keep button text short and clear. Use action verbs (e.g., Download, Sign Up, Contact Us) to drive engagement.

Styling Your Button

Under the Styling tab, you can fully customize the look and feel of your button.

  • Colors: Set button color, border color, or even add a gradient.
  • Text style: Apply any of your global text styles to keep the design consistent.
  • Shadow: Add depth with drop shadows.
  • Padding: Adjust internal spacing for a larger or smaller button feel.
  • Border radius: Control roundness – 0px = sharp rectangle, higher values = pill-shaped buttons.
  • Border size: Adjust thickness for outlined buttons.
  • Expand to full width: Make your button span the full column width.
  • Hover effect: Choose animations (e.g. slide color, fade, grow) for when visitors hover over the button.
  • Hover color / Hover text color: Define how your button changes on hover to grab attention.

💡 Design tip

Use hover effects to add interactivity—but keep them subtle. A simple color shift or slide animation feels polished without being distracting.

Button Variations

By combining the above settings, you can create endless button styles. Here are a few examples:

  1. Full Color Button → Solid brand color for strong CTAs.
  2. Outlined Button → Transparent background with border – great for secondary CTAs.
  3. Gradient Button → Modern look with two-tone colors.
  4. Shadow Button → Adds depth, making the button feel clickable.

💡 Pro tip:

Use one primary button style across your site for consistency. Reserve alternate styles (outlined, secondary colors) for less important actions.

Best Practices for Buttons

  • Keep it clear: One action per button—don’t confuse users.
  • Placement matters: Put buttons where visitors naturally pause (after a section of text, inside hero banners, or at the end of a form).
  • Contrast is key: Make sure buttons stand out from the background with strong color contrast.
  • Size for touch: On mobile, buttons should be large enough to tap easily (at least 44px high).
  • Consistent hierarchy: Use one main button style for primary actions and secondary styles for less important actions.

✅ With the Button widget, you can create clear, attractive, and interactive CTAs that guide your visitors through your site and increase conversions.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.