Bouton Lire la suite avec flèche

Question

J'essaie de créer un bouton "Lire la suite" avec une flèche vers la droite, comme indiqué sur l'image. La couleur d'arrière-plan est blanche et l'ensemble du bouton doit ressembler à ceci.

J'utilise le code suivant. La flèche ici est blanche, donc dans mon projet je ne peux voir que le bouton "Afficher le profil" mais pas la flèche en raison de la couleur d'arrière-plan. Comment changer la couleur des flèches ?

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

J'ai essayé de créer des flèches sans utiliser de liens, mais aucune d'entre elles n'était aussi belle que celle que j'ai trouvée sur Internet.

Answer 1

Actuellement, votre flèche est remplie #fff (blanche).

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

Changez l'attribut fill sur le 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>"

...ou quelle que soit la couleur hexagonale de votre flèche.