Solution 1 :

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

Problem :

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>

Comments

Comment posted by Kudos

Can you put it on Codepen or JSFiddle so we can better understand wat is happening?

Comment posted by MicasiO

It doesn’t work, it only makes the icon black

By