<div class="button" role="button">Default Button</div>
<div class="button primary" role="button">Primary Button</div>
<div class="button danger large" role="button">Danger && Large Button</div>

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  
  .button {
    margin: 5px;
  }
}
.button {
    // 声明CSS自定义属性
    --backgroundColor: #fff;
    --borderColor: #ccc;
    --borderRadius: 5px;
    --fontSize: 16px;
    --color: #333;
    --padding: 5px 10px;

    // 按钮的基本样式
    display: inline-flex;
    justify-content: center;
    align-items: center;

    // 调用CSS自定义属性
    background: var(--backgroundColor);
    border: 1px solid var(--borderColor);
    color: var(--color);
    font-size: var(--fontSize);
    padding: var(--padding);
    border-radius: var(--borderRadius);
}

.primary {
    --backgroundColor: #007bff;
    --borderColor: #007bff;
    --color: #fff;
}

.danger {
    --color: #fff;
    --backgroundColor: #dc3545;
    --borderColor: #dc3545;
}

.large {
  --padding: .5rem 1rem;
  --borderRadius: .3rem;
  --fontSize: 1.25rem;
}