Background Color Issue with Image as a Button with HTML/CSS, how to fix?

I am trying to use some images as buttons with a black background for the body of the page. Unfortunately the button has a white background behind the content of the image that I can’t get rid of, as I’d like the button’s background to match the body background’s color. I have tried background-color, background and color and several other attempts that I can’t recall. Here is my current code for the audio button, which is one attempt that doesn’t work:

.audiobutton {
    background-color: black;
    appearance: none;
    border: none;
    height: 40%;
    width: 25%;
    position: relative;
    z-index: 1;
}

It produces the effect seen in the attached screenshot, and after scouring sites like W3 I don’t know how to achieve the desired effect.

In case anyone is wondering about the HTML associated with the buttons, here it is:

<a class="audiobutton" href="audio.html">
            <button type="link">
                <img src="Renders/1-alpha-v2.png" alt="audiobutton"/>
            </button>
        </a>

You need to sign in to view this answers