Button Widget

🔧 What It Is

A versatile tool for creating styled buttons with customizable text, icons, spacing, and advanced design options. Ideal for calls to action, navigation links, or interactive prompts.

➕ Adding a Button

1. Drag the Button widget into any section or column.

2. In the Content panel, enter your button text.

3. Add a link (URL or dynamic tag), choose alignment, and select an HTML tag (like <a> or <button>).

⚙️ Content Settings

• Text: Set the label to prompt user action (e.g., “Buy Now”, “Read More”).

• Link: Define the destination URL and choose whether it opens in a new tab.

• Alignment: Align the button within its container (left, center, right, full width).

• Size Options: Choose predefined sizes (small, medium, large, full width) or set a custom size manually.

• Icon (Optional): Attach an icon to the left or right of the text and choose from a library.

• Icon Spacing: Adjust distance between text and icon for balanced appearance.

🎨 Style Customization

Structure

• Text Color: Define separate colors for default and hover states.

• Background Color: Pick background shades for normal and hover.

• Border: Customize width, style (solid, dashed, etc.), color, and radius for rounded edges.

• Typography: Adjust font family, size, weight, transform, style, decoration, line height, and letter spacing.

Spacing and Visual Effects

• Padding: Control internal button spacing for a balanced look.

• Box Shadow: Add shadow effects with surround, blur, spread, and color customization.

• Hover Effects: Set hover animation for color, background, border, and shadow transitions.

• Transition Duration: Define how long the hover animation takes to complete.

🛠️ Advanced Settings

In the Advanced panel, you can:

• Set margin, padding, z-index, responsive visibility, and custom positioning.

• Add motion effects or entrance animations.

• Use custom CSS, attributes, or HTML anchors for deeper customization.

• Fine-tune layout and interaction timing.

✅ Best Practices

• Use a clear, action-oriented label to guide users (e.g., “Sign Up”, “Get Started”).

• Maintain consistent typography and button size to preserve design unity.

• Use contrasting colors for text and backgrounds to ensure accessibility.

• Apply subtle hover animations for user feedback and interactivity.

• Adopt full-width buttons for mobile views to enhance usability.

📝 Ideal Use Cases

• Primary or secondary calls-to-action in hero sections or content areas.

• Clickable buttons for forms, downloads, or external links.

• Part of card elements, feature sections, or navigation prompts.

• Styled button groups to guide user flow or actions.

The Button widget combines visual flexibility with interactive capability, making it easy to build buttons that stand out and drive engagement. Let me know if you’d like help creating a button style guide or building CTA sets for your site.