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