.o-button {
  // 文字颜色
  --e-button-font-color: var(--e-color-brand1);
  --e-button-font-color-primary: var(--e-color-white);
  --e-button-font-color-secondary: var(--e-color-text1);
  --e-button-font-color-text: var(--e-color-text1);
  // 文字颜色 hover态，注：只有类型为outline的按钮hover时有文字颜色变化
  --e-button-font-color_hover: var(--e-color-brand2);
  // 文字颜色 avtive态，注：只有类型为outline的按钮active时有文字颜色变化
  --e-button-font-color_active: var(--e-color-brand3);
  // 文字颜色 disabled态
  --e-button-font-color_disabled: var(--e-color-brand5);
  --e-button-font-color-primary_disabled: var(--e-color-white);
  --e-button-font-color-secondary_disabled: var(--e-color-text1);
  --e-button-font-color-text_disabled: var(--e-color-text5);

  // 背景颜色
  --e-button-bg-color: var(--e-color-transparent);
  --e-button-bg-color-primary: var(--e-color-brand1);
  --e-button-bg-color-secondary: var(--e-color-secondary);
  --e-button-bg-color-text: var(--e-color-transparent);
  // 背景颜色 hover态
  --e-button-bg-color_hover: var(--e-color-transparent);
  --e-button-bg-color-primary_hover: var(--e-color-brand2);
  --e-button-bg-color-secondary_hover: var(--e-color-secondary_hover);
  --e-button-bg-color-text_hover: var(--e-color-secondary_hover);
  // 背景颜色 active态
  --e-button-bg-color_active: var(--e-color-transparent);
  --e-button-bg-color-primary_active: var(--e-color-brand3);
  --e-button-bg-color-secondary_active: var(--e-color-secondary_active);
  --e-button-bg-color-text_active: var(--e-color-secondary_active);
  // 背景颜色 disabled态
  --e-button-bg-color_disabled: var(--e-color-transparent);
  --e-button-bg-color-primary_disabled: var(--e-color-brand5);
  --e-button-bg-color-secondary_disabled: var(--e-color-secondary_disabled);
  --e-button-bg-color-text_disabled: var(--e-color-secondary_disabled);

  // border
  --e-button-border: 1px solid var(--e-color-brand1);
  --e-button-border-primary: 1px solid var(--e-color-brand1);
  --e-button-border-secondary: 1px solid var(--e-color-secondary);
  --e-button-border-text: 1px solid var(--e-color-transparent);
  // border hover态
  --e-button-border_hover: 1px solid var(--e-color-brand2);
  --e-button-border-primary_hover: 1px solid var(--e-color-brand2);
  --e-button-border-secondary_hover: 1px solid var(--e-color-secondary_hover);
  --e-button-border-text_hover: 1px solid var(--e-color-secondary_hover);
  // border active态
  --e-button-border_active: 1px solid var(--e-color-brand3);
  --e-button-border-primary_active: 1px solid var(--e-color-brand3);
  --e-button-border-secondary_active: 1px solid var(--e-color-secondary_active);
  --e-button-border-text_active: 1px solid var(--e-color-secondary_active);
  // border disabled态
  --e-button-border_disabled: 1px solid var(--e-color-brand5);
  --e-button-border-primary_disabled: 1px solid var(--e-color-brand5);
  --e-button-border-secondary_disabled: 1px solid var(--e-color-secondary_disabled);
  --e-button-border-text_disabled: 1px solid var(--e-color-transparent);

  // font-size
  --e-button-font-size: var(--e-font-size-h8);
  --e-button-font-size-small: var(--e-font-size-text);
  --e-button-font-size-mini: var(--e-font-size-tip);

  // line-height
  --e-button-line-height: var(--e-line-height-h8);
  --e-button-line-height-small: var(--e-line-height-text);
  --e-button-line-height-mini: var(--e-line-height-tip);

  // padding
  --e-button-padding: 11px 28px;
  --e-button-padding-small: 9px 28px;
  --e-button-padding-mini: 6px 16px;

  // icon margin
  --e-button-icon-margin: 8px;
  --e-button-icon-margin-small: 8px;
  --e-button-icon-margin-mini: 4px;
  // icon font-size
  --e-button-icon-font-size: var(--e-font-size-h5);
  --e-button-icon-font-size-small: var(--e-font-size-h8);
  --e-button-icon-font-size-mini: var(--e-font-size-tip);
  // icon padding
  --e-button-icon-paddding: 20px;
  --e-button-icon-paddding-small: 14px;
  --e-button-icon-paddding-mini: 6x;

  // animation
  -o-button-transition:
    color 0.2s,
    background-color 0.3s,
    border 0.3s;
}