Button Styles

Three button styles with full state management for hover and pressed states.

Available Styles

Style	Attribute
Style 1 (Primary)	`data-style-guide-button="style1"`
Style 2 (Secondary)	`data-style-guide-button="style2"`
Style 3 (Tertiary)	`data-style-guide-button="style3"`

Button States

Each style includes configuration for multiple states:

State	Configurable Properties
Regular	Background, text color, subtext color, border, corners, shadow
Hover	Background, text color, subtext color
Pressed	Background, text color, subtext color

Usage

JSON

{
  "type": "Button/V1",
  "selectors": {
    ".elButton": {
      "attrs": {
        "data-style-guide-button": "style1",
        "data-skip-corners-settings": "false",
        "data-skip-shadow-settings": "false",
        "style": { "border-radius": 8 }
      },
      "params": {
        "--style-background-color": "rgb(59, 130, 246)",
        "--style-border-width": 0,
        "--style-border-color": "transparent",
        "--style-border-style": "solid",
        "--style-border-width--unit": "px",
        "border-radius--unit": "px"
      }
    },
    ".elButton .elButtonText": {
      "attrs": {
        "style": {
          "color": "rgb(255, 255, 255)",
          "font-size": 18,
          "font-weight": "700"
        }
      },
      "params": {
        "font-size--unit": "px",
        "line-height--unit": "%"
      }
    },
    ".elButton .elButtonSub": {
      "attrs": {
        "style": {
          "color": "rgba(255, 255, 255, 0.8)",
          "font-size": 12
        }
      },
      "params": {
        "font-size--unit": "px"
      }
    }
  }
}

Defining Hover States

JSON

{
  "selectors": {
    ".elButton:hover,\\n.elButton.elButtonHovered": {
      "params": {
        "--style-background-color": "#2563eb"
      }
    },
    ".elButton:hover .elButtonText,\\n.elButton.elButtonHovered .elButtonText": {
      "attrs": {
        "style": { "color": "#ffffff" }
      }
    },
    ".elButton:hover .elButtonSub,\\n.elButton.elButtonHovered .elButtonSub": {
      "attrs": {
        "style": { "color": "#ffffff" }
      }
    }
  }
}

Tip: Always define hover states with the same colors as default if you don't want CF2 to auto-generate different colors.

Button Text Structure

Buttons have two text slots:

Slot	Selector	Purpose
`button-main`	`.elButtonText`	Primary button text
`button-sub`	`.elButtonSub`	Secondary/sub text

JSON

{
  "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"
    }
  ]
}

Overriding Styleguide

To use custom button styling instead of styleguide defaults:

JSON

{
  "selectors": {
    ".elButton": {
      "attrs": {
        "data-style-guide-button": "style1"
      },
      "params": {
        "style-guide-override-button": true,
        "--style-background-color": "#dc2626"
      }
    }
  }
}