JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
  Download
  <svg width="30px" height="30px" viewBox="0 0 70 70">
    <polygon points="48.5,15.5 22.5,15.5 22.5,35.334 11.5,35.334 35.5,59.5 59.584,35.334 48.5,35.334 "/>
  </svg>
</a>

<p>Try clicking the button to see its active state.</p>

CSS

a { width: 170px; border: 2px solid black; border-radius: 8px; text-decoration: none; color: black; display: inline-block; padding: 9px 12px; margin: 10px 5px; font-size: 20px; color: rgba(100,120,200,1.0); border-color: rgba(100,120,200,0.7); position: relative; }
a svg { position: absolute; right: 8px; top: 6px; fill: rgba(100,120,200,0.7); }
a:active svg { fill: #fff; }
a:active { background: #000; color: #fff; background: rgba(100,120,200,0.7); border-color: rgba(100,120,200,0); }