Read more button with arrow

Question

I'm trying to make a "Read More" button with a right arrow as shown. The background color is white and the entire button must look like this.

I am using the following code. The arrow here is white, so in my project I can only see the "View Profile" button but not the arrow due to the background color. How to change arrow color?

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

I've tried creating arrows without using links, but none of them looked as good as this one I found on the internet.

Answer 1

Currently, your arrow is filled with #fff (white).

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

Change the fill attribute on the 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>"

...or whatever hex color you want your arrow to be.