Search code examples
javascripthtmlbuttonpng

PNG Image as Button

I am trying to set an image in my assets as a button, and for the most part, have it working. The image is a PNG.

Here is my HTML code for the button:

<button type = "button" onclick = "start()"> <img src = "assets/site/start-button.png"> </button>

Here is the PNG image: click me

Here is what I see: click me pt 2

How do I make the white part of the button go away? I think (not completely sure if this is the case -- if not, could someone please explain what is happening?) that the button is encasing the image, like it does text, instead of simply having the image as a button. How do I change this? I want it to only show the PNG image, nothing else.

EDIT: I do not have any css for the button. Do I need to add anything?

Solution

  • I would suggest removing the image from the button, and instead setting it as a background image in css, while remove the default button styles. Working example:

    function start() {
  console.log('start');
}
    .button {
  background: url('https://mdn.mozillademos.org/files/7693/catfront.png') no-repeat;
  cursor:pointer;
  border: none;
}
    <input type="button" name="button" onclick="start()" class="button" />

    If you are unfamiliar with css, see https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started