我正在尝试制作一个带有右箭头的“阅读更多”按钮,如图所示。背景颜色为白色,整个按钮必须如下所示。
我正在使用以下代码。这里的箭头是白色的,所以在我的项目中我只能看到“查看配置文件”按钮,但由于背景颜色而看不到箭头。 如何更改箭头颜色?
<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粉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>"
...或者您想要箭头的任何十六进制颜色。