Jack Jack - 1 month ago 9
HTML Question

HTML and Javascript: how to set image as button?

Hello I have the following button and JS code:

<button type="button" id="play-pause" ><img id = "playbtn" src="img/icons/play.png"></button>
playButton.addEventListener("click", function() {

if (video.paused == true) {
// Play the video
video.play();

// Update the button text to 'Pause'
document.getElementById("playbtn").src = "img/icons/pause.png";
} else {
// Pause the video
video.pause();

// Update the button text to 'Play'
document.getElementById("playbtn").src = "img/icons/play.png";
}
});


When i click my button it changes the button to a play icon image and when i click it again it changes it to a pause icon button. This works fine but it still displays the default button background. I want it to be just an image. It currently gives my a button GUI with an image in it. Thats not what I want, how can I fix it?

Answer

You can reset default <button> styles via CSS. This link might be helpful for you.