如何实现按钮hover状态下同时应用两种background-clip效果

普通状态：

期望的hover状态效果：

纯CSS即可实现，不需要JavaScript或jQuery，完美支持border-radius圆角，核心是通过伪元素分层拆分效果，避开单元素单background-clip的限制。

实现逻辑 #

将效果拆为3个堆叠层，从下到上依次排列，互不干扰：

• 最底层：铺满按钮+边框区域的图案背景，用来实现hover时的图案边框效果
• 中间层：和按钮内部（padding-box区域）尺寸一致的白色遮罩，挡住底层图案的中间部分，只露出边框位置的图案
• 最上层：按钮文本，通过background-clip: text将同一份图案裁剪为文字形状，实现图案文字效果

完整代码 #

button {
  /* 基础默认样式 */
  position: relative;
  padding: 15px 32px;
  border: 2px solid #000;
  border-radius: 5px;
  background: #fff;
  color: #000;
  cursor: pointer;
  /* 文字裁剪前置配置 */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/* 最底层：边框图案层 */
button::before {
  content: "";
  position: absolute;
  /* 向外偏移边框宽度，覆盖整个边框区域 */
  inset: -2px;
  /* 外圆角 = 按钮圆角 + 边框宽度 */
  border-radius: 7px;
  /* 替换为你的图案资源，保证和文字层的图案配置完全一致 */
  background: url("https://i.imgur.com/drcgLxf.png") center/cover no-repeat;
  z-index: -2;
}

/* 中间层：内部白色遮罩 */
button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: #fff;
  z-index: -1;
}

/* hover状态激活效果 */
button:hover {
  border-color: transparent;
  /* 文字层图案，配置和边框层完全一致，避免图案错位 */
  background: url("https://i.imgur.com/drcgLxf.png") center/cover no-repeat;
}

<button>text here</button>

注意事项 #

• 两层图案的background-position、background-size必须完全一致，否则边框和文字的图案会错位
• 圆角值需要匹配：最底层伪元素的圆角 = 按钮本身圆角 + 边框宽度，避免圆角处图案穿帮
• 该方案兼容所有现代浏览器，如需适配极旧版本可补充对应内核前缀

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