如何为箭头按钮定义多套配色方案且不修改原CSS代码

我用以下CSS实现了一个带右箭头样式的按钮：

.btn-arrow-right {
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 2em;
  position: relative;
  width: 8em;
  height: 2em;
}

.btn-arrow-right a {
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 10;
}

.btn-arrow-right::before,
.btn-arrow-right::after {
  background-color: #29c0d5;
  border-radius: 2px;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  transition: all 1s;
  height: 1em;
}

.btn-arrow-right::before {
  box-shadow: -1px 1px 0 #1897c0, -2px 2px 0 #1897c0, -3px 3px 0 #1897c0, -4px 4px 0 #1897c0;
  transform: skew(45deg);
  top: 0;
}

.btn-arrow-right::after {
  box-shadow: 1px 1px 0 #1897c0, 2px 2px 0 #1897c0, 3px 3px 0 #1897c0, 4px 4px 0 #1897c0;
  transform: skew(-45deg);
  bottom: 0;
}

.btn-arrow-right:hover::before,
.btn-arrow-right:hover::after {
  background: #68d3e2;
}

.btn-arrow-right:focus {
  outline: 0;
}

.btn-arrow-right:focus::before,
.btn-arrow-right:focus::after {
  background: #68d3e2;
}

按钮的HTML结构：

<button class="btn btn-arrow-right"><a href="#">MyButton</a></button>

当前按钮包含三种固定颜色：

#29c0d5 按钮背景色
#1897c0 按钮阴影色
#68d3e2 悬停/聚焦效果色

现在希望不修改原有CSS定义的前提下，定义多套三色配色方案，应用到不同按钮上，目标按钮结构如下：

<button class="btn btn-arrow-right red-palette"><a href="#">MyRedButton</a></button>
<button class="btn btn-arrow-right blue-palette"><a href="#">MyBlueButton</a></button>
<button class="btn btn-arrow-right green-palette"><a href="#">MyGreenButton</a></button>

请问实现该需求最优雅且易读的方法是什么？

这种方法无需修改原有CSS核心逻辑，仅通过新增变量和调色板类实现配色扩展，兼具可读性与可维护性。

步骤1：为原有按钮绑定CSS变量 #

在不改动原有样式逻辑的前提下，为.btn-arrow-right添加语义化变量，并将原有固定色值替换为变量：

/* 原有样式保留，新增变量定义 */
.btn-arrow-right {
  --btn-bg: #29c0d5;
  --btn-shadow: #1897c0;
  --btn-hover: #68d3e2;
}

/* 替换原有固定色值为变量 */
.btn-arrow-right::before,
.btn-arrow-right::after {
  background-color: var(--btn-bg);
}

.btn-arrow-right::before {
  box-shadow: -1px 1px 0 var(--btn-shadow), -2px 2px 0 var(--btn-shadow), -3px 3px 0 var(--btn-shadow), -4px 4px 0 var(--btn-shadow);
}

.btn-arrow-right::after {
  box-shadow: 1px 1px 0 var(--btn-shadow), 2px 2px 0 var(--btn-shadow), 3px 3px 0 var(--btn-shadow), 4px 4px 0 var(--btn-shadow);
}

.btn-arrow-right:hover::before,
.btn-arrow-right:hover::after,
.btn-arrow-right:focus::before,
.btn-arrow-right:focus::after {
  background: var(--btn-hover);
}

步骤2：定义多套调色板类 #

通过新增调色板类覆盖变量值，实现不同配色：

/* 红色调色板 */
.red-palette {
  --btn-bg: #d52929;
  --btn-shadow: #c01818;
  --btn-hover: #e26868;
}

/* 蓝色调色板 */
.blue-palette {
  --btn-bg: #294bd5;
  --btn-shadow: #1830c0;
  --btn-hover: #6885e2;
}

/* 绿色调色板 */
.green-palette {
  --btn-bg: #29d55a;
  --btn-shadow: #18c042;
  --btn-hover: #68e28f;
}

方案优势 #

• 无侵入性：完全保留原有CSS逻辑，仅通过扩展实现需求
• 可读性强：变量名语义化，调色板类与配色一一对应，逻辑清晰
• 可维护性高：新增/修改配色只需调整调色板类的变量值，无需重复编写样式
• 兼容性好：CSS自定义属性支持所有现代浏览器，无兼容风险

内容的提问来源于stack exchange，提问作者Dario de Judicibus