Prevent background color from overlapping transparent icon

Question

I have an icon in a button, and I want the icon to be transparent and the button background color to be white. But the white background color is overlapping the transparency of the icon. Is there a work around for this?

here is the html code:

<button id="submit-btn">
      <i class="fa fa-plus" style={{ fontSize: "48px" }}></i>
</button>

Answer 1

<button id="submit-btn" style={{backgroundColor:"#FFFFFF"}}>
      <i class="fa fa-plus" style={{ fontSize: "48px", color:'#000000' }}></i>
</button>