AllDesignWidgetsButton Widget

Button Widget

Add clickable buttons with custom styles and links.

The Button widget lets you create calls-to-action with consistent styling and deep links.

Add a Button widget

1

Open the widget picker

In the page editor, open Widgets.

2

Drag Button

In Common, drag Button (button icon) onto the page.

3

Open Button Settings

Click the widget and choose Button Settings.

Button Settings dialog

The dialog includes tabs for:

  • Settings: Button Text, Button Color, Hover Color, Transition (Fade, Scale, Bump, Rotate, Skew), Padding, Full Width, Alignment, Icon, Link Address.
  • Text Styles: Font Family, Text Color, Text Format, Hover Text Color, Text Alignment, Font Size, Letter Spacing, Line Height.
  • Border: Border Color, Style (Solid, Dotted, Dashed, Double), Border Width, Border Radius, Shadow.

Toolbar actions

When the button is selected, use:

  • Button Settings
  • Button Type (Primary, Secondary, Third)
  • Full Width
  • Alignment
  • Link
  • Animation
  • Position
  • Copy
  • Delete

If the button is in a header, you can also set mobile behavior (Mobile: Show, Mobile: Hide, Slideout Only).

If you link a button to a section on your homepage, the saved link now uses a clean hash format (for example, #pricing) instead of adding the homepage slug.

Updated Mar 6, 2026

Was this helpful?