帶箭頭的「閱讀更多」按鈕
P粉616111038
P粉616111038 2023-09-09 12:16:11
0
1
594

我正在嘗試製作一個帶有右箭頭的“閱讀更多”按鈕,如圖所示。背景顏色為白色,整個按鈕必須如下所示。

我正在使用以下程式碼。這裡的箭頭是白色的,所以在我的專案中我只能看到「檢視設定檔」按鈕,但由於背景顏色而看不到箭頭。 如何更改箭頭顏色?

<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粉616111038
P粉616111038

全部回覆(1)
P粉743288436

目前,您的箭頭已填入#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>"

...或您想要箭頭的任何十六進位顏色。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板