如何将双色CSS样式按钮修改为纯浅绿色？

问题背景 #

现有按钮CSS代码实现了双色效果，需要调整为纯浅绿色样式：

.button {
    font-size: 1rem;
    font-weight: bold;
    padding: 1em 2em;
    cursor: pointer;
    background: transparent;
    color: white;
    border-color: hsl(126, 100%, 30%);
    border-radius: 1.5em/50%;
}

修改步骤与代码 #

原代码中background: transparent是导致双色效果的核心原因，只需将背景色设置为与边框一致的浅绿色，并完善边框属性即可：

基础纯绿色按钮代码 #

.button {
    font-size: 1rem;
    font-weight: bold;
    padding: 1em 2em;
    cursor: pointer;
    background: hsl(126, 100%, 30%); /* 替换透明背景为目标浅绿色 */
    color: white;
    border: solid 2px hsl(126, 100%, 30%); /* 统一边框样式、宽度与颜色 */
    border-radius: 1.5em/50%;
}

可选调整：更柔和的浅绿色 #

如果想要更浅的绿色调，可以微调hsl的亮度参数（第三个值），比如改为40%：

.button {
    font-size: 1rem;
    font-weight: bold;
    padding: 1em 2em;
    cursor: pointer;
    background: hsl(126, 100%, 40%);
    color: white;
    border: solid 2px hsl(126, 100%, 40%);
    border-radius: 1.5em/50%;
}

内容的提问来源于stack exchange，提问作者DerBZocker2