> ## Documentation Index
> Fetch the complete documentation index at: https://funnelfox.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Button element

> Configure buttons in FunnelFox funnels. Set actions, styles, hover states, and link buttons to navigation, payments, or custom logic.

The Button element is your primary tool for driving user actions. Whether
navigating between screens, triggering purchases, or linking to external
resources, buttons turn visitors into active participants in your funnel.

<Frame>
  <img src="https://mintcdn.com/funnelfox/cxG6YKcN6wJiSnp-/assets/element-button-full.png?fit=max&auto=format&n=cxG6YKcN6wJiSnp-&q=85&s=280f73221db31a04dc294125b6d622a9" alt="Button element in Editor" width="1920" height="989" data-path="assets/element-button-full.png" />
</Frame>

## Common Use Cases

<CardGroup cols={2}>
  <Card title="Primary CTAs" icon="bullseye">
    "Get Started", "Continue", "Sign Up" - main conversion drivers
  </Card>

  <Card title="Navigation" icon="arrow-right">
    Move users through your funnel flow with clear next steps
  </Card>

  <Card title="External Links" icon="arrow-up-right-from-square">
    Link to app stores, websites, or **[deep links into apps](/editor/deep-links)**
  </Card>

  <Card title="Purchase Actions" icon="credit-card">
    Trigger checkout flows, upsells, or subscription upgrades
  </Card>
</CardGroup>

## Properties

### Parameters Tab

#### Trigger: On Press

Buttons have a single trigger that fires when tapped/clicked. Configure what
happens using the Action settings.

See [Actions & Triggers](/editor/actions) for complete details on:

* **Action types**: Navigate, Show/Hide, Purchase, External Link, etc.
* **Dynamic actions**: Conditional routing based on user data
* **Data field**: Analytics tracking configuration
* **Delay**: Adding delays before actions execute

<Info>
  Buttons automatically show a loading state during async actions like
  purchases or API calls. This provides immediate feedback and prevents
  double-clicks.
</Info>

For common properties (ID, Visibility), see [Elements Overview](/elements/overview#common-properties).

## Styles Tab

### Button-Specific Styles

#### Width

Control how much space the button occupies:

* **Percentage**: Width relative to container (e.g., 100% for full-width)
* **Auto**: Size based on text content

#### Padding

Internal spacing between button text and edges:

* Top/Bottom: Vertical breathing room
* Left/Right: Horizontal spacing
* Larger padding = bigger, more prominent button

#### Background

Button fill color with opacity control:

* Use brand colors for primary actions
* Lighter/muted colors for secondary actions
* Transparency for ghost buttons

#### Roundness

Corner radius in pixels:

* `0px`: Sharp corners (formal, serious)
* `8-12px`: Slightly rounded (modern, friendly)
* `50px+`: Pill-shaped (playful, approachable)

### Visual Effects

#### Pulse Animation

Add a subtle pulsing effect to draw attention:

* **None**: Static button (default)
* **Pulse**: Gentle scaling animation

Animation controls:

* **Duration**: How long each pulse takes (in seconds)
* **Easing**: Animation smoothness (Ease In, Ease Out, Linear)

<Tip>
  Use pulse animation sparingly for your most important CTA. Too many
  animated elements can overwhelm users.
</Tip>

#### Shadow

Add depth with customizable shadows:

* **Shadow Color**: Often matches button color at lower opacity
* **Shadow Size**: Pixel spread of the shadow
* Creates visual hierarchy and makes buttons appear "clickable"

### Text Styles

Configure button label appearance:

* **Color**: Text color (ensure high contrast with background)
* **Font**: Inherit from theme or custom selection
* **Size**: Text size in pixels
* **Weight**: Regular, Medium, Bold, etc.
* **Align**: Left, Center (most common), Right
* **Line Height**: Spacing for multi-line text

Button text supports variables for personalization:

```
Continue, {{first-name}}
View Your {{plan-type}} Plan
Save {{discount-amount}}% Today
```

### Apply Styles Globally

The **"apply styles to all Buttons"** link sets default styling for all
buttons in your funnel. See [Text element documentation](/elements/text#apply-styles-globally)
for how global styles work.

For common container properties (position, offset, borders), see
[Elements Overview](/elements/overview#styles-tab).

## Best Practices

<CardGroup cols={2}>
  <Card title="Make It Obvious" icon="hand-pointer">
    Buttons should look clickable. Use color, shadows, and size to make
    them stand out from other content.
  </Card>

  <Card title="Clear Labels" icon="font">
    Use action-oriented text. "Get Your Free Trial" beats "Submit".
    Tell users exactly what happens next.
  </Card>

  <Card title="Thumb-Friendly" icon="mobile">
    Minimum 44px height on mobile for easy tapping. Consider thumb reach
    zones for placement.
  </Card>

  <Card title="Visual Hierarchy" icon="layer-group">
    One primary button per screen. Secondary actions should be visually
    less prominent.
  </Card>
</CardGroup>

### Mobile Optimization

* **Full-width buttons** often work better than centered narrow ones
* **Place primary CTAs** in the thumb zone (bottom third of screen)
* **Avoid multiple buttons** side-by-side on small screens
* **Test tap targets** - ensure buttons aren't too close together

### Performance Tips

* **Limit animations**: One pulsing button maximum per screen
* **Consider contrast**: High contrast improves perceived performance

## Troubleshooting

<AccordionGroup>
  <Accordion title="Button not responding to clicks">
    * Check visibility isn't set to "No" or conditionally hidden
    * Verify an action is configured in the trigger
    * Test in preview mode, not editor
    * Ensure no invisible elements are overlapping
  </Accordion>

  <Accordion title="Loading state stuck">
    * Check network requests in browser console
    * Verify API endpoints are responding
    * Test with simpler action first (like Navigate)
    * Check for JavaScript errors blocking completion
  </Accordion>

  <Accordion title="Text cut off or wrapping badly">
    * Increase button width or reduce font size
    * Check padding isn't too large
    * Test with longest possible variable values
    * Consider shorter, punchier labels
  </Accordion>

  <Accordion title="Button looks different on mobile">
    * Preview on actual devices, not just browser
    * Check if width percentage works on small screens
    * Verify text size is readable on mobile
    * Test tap target size (minimum 44px height)
  </Accordion>

  <Accordion title="Pulse animation not showing">
    * Verify Visual Effects is set to "Pulse"
    * Check animation duration isn't 0
    * Ensure button is visible on screen
    * Try refreshing preview to restart animations
  </Accordion>
</AccordionGroup>

## Next Steps

* [Actions & Triggers](/editor/actions) - Configure button behaviors
* [Text Input Elements](/elements/textinput) - Collect data before button actions
* [Elements Overview](/elements/overview) - Learn about other elements