Schaltfläche „Mehr lesen“ mit Pfeil

Question

Ich versuche, eine „Weiterlesen“-Schaltfläche mit einem Rechtspfeil zu erstellen, wie im Bild gezeigt. Die Hintergrundfarbe ist weiß und die gesamte Schaltfläche muss so aussehen.

Ich verwende den folgenden Code. Der Pfeil ist hier weiß, sodass ich in meinem Projekt aufgrund der Hintergrundfarbe nur die Schaltfläche „Profil anzeigen“ sehen kann, aber nicht den Pfeil. Wie ändere ich die Pfeilfarbe?

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

Ich habe versucht, Pfeile ohne die Verwendung von Links zu erstellen, aber keiner davon sah so gut aus wie dieser, den ich im Internet gefunden habe.

Answer 1

目前，您的箭头已填充#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>"

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