Butang baca lagi dengan anak panah

Question

Saya cuba membuat butang "Baca Lagi" dengan anak panah kanan seperti yang ditunjukkan dalam gambar. Warna latar belakang putih dan keseluruhan butang mesti kelihatan seperti ini.

Saya menggunakan kod berikut. Anak panah di sini berwarna putih, jadi dalam projek saya, saya hanya dapat melihat butang "Lihat Profil" tetapi bukan anak panah kerana warna latar belakang. Bagaimana untuk menukar warna anak panah?

<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;
}

Saya telah cuba mencipta anak panah tanpa menggunakan pautan, tetapi tiada satu pun daripadanya kelihatan sebagus yang saya temui di internet.

Answer 1

Pada masa ini, anak panah anda terisi #fff (putih).

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>"

Tukar atribut fill pada SVG:

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>"

...atau apa sahaja warna hex yang anda mahu anak panah anda.