Button/V1

Buttons with 8+ action types, icons, and comprehensive styling options.

Button Action Types

Action	href Value	Description
Submit Form	`#submit-form`	Submit the form on the page
Open Link	`https://example.com`	Navigate to URL (use target: "_blank" for new tab)
Next Step	`?next_funnel_step=true`	Go to next funnel step
One-Click Upsell	`#submit-oto`	OTO purchase button
Open Popup	`#open-popup`	Open the page popup
Close Popup	`#close-popup`	Close the popup
Scroll To	`#scroll-{element-id}`	Scroll to element by ID
Show/Hide	`#show-hide`	Toggle element visibility

Basic Button

JSON

{
  "type": "Button/V1",
  "id": "6Z-BtnEx-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": {
      "text-align": "center",
      "margin-top": 16
    }
  },
  "params": {
    "buttonState": "default",
    "href": "#submit-form",
    "target": "_self",
    "margin-top--unit": "px"
  },
  "selectors": {
    ".elButton": {
      "attrs": {
        "data-style-guide-button": "style1",
        "style": { "border-radius": 8 }
      },
      "params": {
        "--style-padding-horizontal": 32,
        "--style-padding-horizontal--unit": "px",
        "--style-padding-vertical": 16,
        "--style-padding-vertical--unit": "px",
        "--style-background-color": "rgb(59, 130, 246)",
        "--style-border-color": "transparent",
        "--style-border-width": 0,
        "--style-border-width--unit": "px",
        "border-radius--unit": "px",
        "style-guide-override-button": true
      }
    },
    ".elButton .elButtonText": {
      "attrs": {
        "style": {
          "color": "rgb(255, 255, 255)",
          "font-weight": "700",
          "font-size": 20
        }
      },
      "params": {
        "font-size--unit": "px",
        "line-height--unit": "%"
      }
    }
  },
  "children": [
    {
      "type": "text",
      "innerText": "Get Started",
      "slotName": "button-main",
      "fractionalIndex": "a0"
    }
  ]
}

Button with Icons

Use iconBefore and iconAfter params for Font Awesome icons:

JSON

{
  "type": "Button/V1",
  "params": {
    "href": "#submit-form",
    "iconBefore": "fas fa-bolt",
    "iconAfter": "fas fa-arrow-right"
  },
  "selectors": {
    ".fa_prepended": {
      "attrs": {
        "style": {
          "color": "rgb(251, 191, 36)",
          "margin-left": 0,
          "margin-right": 10
        }
      },
      "params": {
        "margin-left--unit": "px",
        "margin-right--unit": "px"
      }
    },
    ".fa_apended": {
      "attrs": {
        "style": {
          "color": "rgb(255, 255, 255)",
          "margin-left": 10,
          "margin-right": 0
        }
      },
      "params": {
        "margin-left--unit": "px",
        "margin-right--unit": "px"
      }
    }
  }
}

Note: fa_apended uses a single 'p' - this is CF's spelling.

Outline Button

JSON

{
  "type": "Button/V1",
  "selectors": {
    ".elButton": {
      "attrs": {
        "style": { "border-radius": 9999 }
      },
      "params": {
        "--style-background-color": "transparent",
        "--style-border-color": "rgb(59, 130, 246)",
        "--style-border-width": 2,
        "--style-border-width--unit": "px"
      }
    },
    ".elButton .elButtonText": {
      "attrs": {
        "style": {
          "color": "rgb(59, 130, 246)",
          "font-weight": "600"
        }
      }
    }
  }
}

Show/Hide Button

JSON

{
  "type": "Button/V1",
  "attrs": {
    "data-elbuttontype": "showHide"
  },
  "params": {
    "href": "#show-hide",
    "target": "_self",
    "showIds": "details-section,cta-section",
    "hideIds": "intro-section"
  }
}

Scroll To Button

JSON

{
  "type": "Button/V1",
  "params": {
    "href": "#scroll-pricing-section",
    "target": "_self"
  }
}

Hover States

Define hover and active states using selectors:

JSON

{
  "selectors": {
    ".elButton": {
      "params": {
        "--style-background-color": "#3b82f6"
      }
    },
    ".elButton:hover,\\n.elButton.elButtonHovered": {
      "params": {
        "--style-background-color": "#2563eb"
      }
    }
  }
}

Tip: Always set hover/active states with the same colors as default to prevent CF2 from auto-generating different colors.

Button with Sub-Text

JSON

{
  "type": "Button/V1",
  "selectors": {
    ".elButton .elButtonSub": {
      "attrs": {
        "style": {
          "font-size": 12,
          "color": "rgba(255, 255, 255, 0.8)"
        }
      },
      "params": {
        "font-size--unit": "px"
      }
    }
  },
  "children": [
    {
      "type": "text",
      "innerText": "Get Started Now",
      "slotName": "button-main",
      "fractionalIndex": "a0"
    },
    {
      "type": "text",
      "innerText": "30-day money back guarantee",
      "slotName": "button-sub",
      "fractionalIndex": "Zz"
    }
  ]
}