Button

Call-to-action links with customizable styling

Overview

The Button element renders as an <a> tag (link element) and is used for call-to-action (CTA) buttons throughout your pages. By default, buttons use btn btn-cta classes which apply your site's primary button styling defined in Global Styles.

Buttons require an href attribute to specify the link destination. Click any button on the canvas to edit its text inline. Buttons can also contain child elements like icons or SVGs for enhanced visual appeal.

Button styles are centrally defined in Global Styles, so changing your theme's button appearance updates all buttons site-wide. You can override individual buttons with custom classes through the Inspector.

Link vs Button

This Button element is semantically an <a> link for navigation. For form submission buttons, use the Form element instead.

Settings

Configure the Button element using these Inspector options:

Setting Description Default
Content Button text. Click the button on canvas to edit inline. "Click Me"
Link (href) Destination URL. Enter a full URL, relative path, or anchor link. #
Target Link target: _self (same tab) or _blank (new tab). _self
Button Style Primary (btn-cta), secondary, outline, or ghost. Customize via classes. btn btn-cta (primary)
Size Button size via padding classes (px-4 py-2, px-6 py-3, etc.). Standard
Icon Optional icon child element. Drag an Icon into the button. None

Styling

Button styles are defined in Global Styles and can be customized site-wide.

Default Classes

New buttons include these classes by default:

  • inline-block – Makes the button inline but allows width/height
  • btn – Base button class from Global Styles
  • btn-cta – Primary CTA styling (background color, text color, padding)

Creating Button Variants

Create different button styles by modifying classes in the Inspector:

Variant Classes Use Case
Primary btn btn-cta Main call-to-action
Secondary btn bg-gray-600 text-white hover:bg-gray-700 Secondary actions
Outline btn border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-white Less prominent actions
Ghost text-primary hover:underline Subtle links, "Learn more"

Hover States

Configure hover effects in the Inspector's Effects section:

  • Hover background color – Change color on hover
  • Hover text color – Invert text on hover
  • Hover transform – Scale, translate, or rotate on hover
  • Transition – Add smooth transitions with transition-all duration-300

Examples

Primary CTA Button

The default primary button style for main call-to-actions.

<a href="/get-started" class="inline-block btn btn-cta">
  Get Started
</a>

Secondary/Outline Button

An outline-style button for secondary actions that shouldn't compete with the primary CTA.

<a href="/learn-more" class="inline-block px-6 py-3 border-2 border-primary text-primary rounded hover:bg-primary hover:text-white transition-colors">
  Learn More
</a>

Button with Icon

Add an icon child to create buttons with visual indicators.

<a href="/download" class="inline-flex items-center gap-2 btn btn-cta">
  <span class="text-lg">
    <i class="fas fa-download"></i>
  </span>
  Download Now
</a>

Full-Width Button

A button that spans the full width of its container, useful for mobile layouts or card footers.

<a href="/subscribe" class="block w-full text-center btn btn-cta">
  Subscribe Now
</a>
Global Styles

The btn and btn-cta classes are defined in Settings → Global Styles. Customize your site's primary button appearance there for consistent styling across all pages.

Next Steps

  • List – Bulleted and numbered lists
  • Icon – Icons to use inside buttons
  • Global Styles – Customize button styling site-wide