如何修改带右箭头的Read More按钮的箭头颜色？

问题出在你SVG代码里的fill='#fff'属性——箭头被设为白色，和按钮的白色背景完全重合，所以看不到。只需要把这个填充色改成和白色背景有对比的颜色即可，比如黑色（#000）或者你需要的其他颜色。

修改后的完整代码如下：

HTML

<button class="c-btn">View Profile</button>

CSS

.c-btn{
  border: none;
  background-color: white;
  padding: 12px 48px 12px 24px;
  border-radius: 4px;
  color: black;
  /* 仅修改了SVG中的fill值为#000 */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'><path d='M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z' transform='translate(-8.59 -6)' fill='#000'/></svg>");
  background-repeat: no-repeat;
  background-position: right 24px center;
}

如果需要其他颜色，直接替换fill='#000'里的颜色值就行，比如深灰色#333、蓝色#165DFF等，只要和白色背景有明显对比就能正常显示箭头。

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