搜索

首页  >  问答  >  正文

带箭头的“阅读更多”按钮

我正在尝试制作一个带有右箭头的“阅读更多”按钮,如图所示。背景颜色为白色,整个按钮必须如下所示。

我正在使用以下代码。这里的箭头是白色的,所以在我的项目中我只能看到“查看配置文件”按钮,但由于背景颜色而看不到箭头。 如何更改箭头颜色?

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

.c-btn{
  border: none;
  background-color: white;
  padding: 12px 48px 12px 24px;
  border-radius: 4px;
  color: black;
  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='#fff'/></svg>");
  background-repeat: no-repeat;
  background-position: right 24px center;
}

我尝试过在不使用链接的情况下创建箭头,但没有一个看起来像我在互联网上找到的这个箭头那么好。

P粉616111038P粉616111038443 天前603

全部回复(1)我来回复

  • P粉743288436

    P粉7432884362023-09-10 09:17:38

    目前,您的箭头已填充#fff(白色)。

    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='#fff'/>
    </svg>"

    更改 SVG 上的 fill 属性:

    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='#ff4a00'/>
    </svg>"

    ...或者您想要箭头的任何十六进制颜色。

    回复
    0
  • 取消回复