如何在同一个button按钮中实现两种不同填充色彩的显示效果

可行CSS实现方案 #

下面是3种不同场景下的实现方式：

• 固定文字场景：拆分文本节点
  把需要变色的文字单独用span标签包裹，分别设置颜色即可，逻辑最简单没有兼容性问题。

<button class="btn">
  <span class="part1">Button</span>
  <span class="part2">Text</span>
</button>
<style>
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #eee;
  font-size: 18px;
  font-weight: 700;
}
.part1 {
  color: #222;
}
.part2 {
  color: #2563eb;
}
</style>

• 动态文字场景：渐变背景裁剪到文字
  不需要拆分节点，通过线性渐变控制不同区间的颜色，用background-clip把背景映射为文字颜色，适配动态生成的文字内容。

<button class="btn-gradient">ButtonText</button>
<style>
.btn-gradient {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #eee;
  font-size: 18px;
  font-weight: 700;
  /* 核心实现 */
  background-image: linear-gradient(90deg, #222 60%, #2563eb 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>

• 交互需求场景：伪元素叠加
  适合需要做hover变色、进度式变色等交互效果的场景，用伪元素复制文字内容，裁剪显示区域实现双色效果。

<button class="btn-pseudo" data-content="ButtonText">ButtonText</button>
<style>
.btn-pseudo {
  position: relative;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #eee;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  overflow: hidden;
}
.btn-pseudo::before {
  content: attr(data-content);
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding-left: 20px;
  color: #2563eb;
  overflow: hidden;
}
</style>

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