EN
HTML - button with image
3
points
In this article, we would like to show you how to create a button with an image in HTML.
Quick solution:
<input type="image" src="https://my-website.com/example.png" onclick="handleClick()" />
Practical example
In this example, to create a button with an image, we use simple input element with the following attributes:
type- with the value set toimageso we can attach an image to it,src- the source of the image,onclick- to attach the event handler to the button.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
input {
height: 50px;
margin: 0 0 0 25px;
}
</style>
<script>
function handleClick(){
console.log('Button clicked...');
}
</script>
</head>
<body>
<p>Click the button:</p>
<input type="image"
src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"
onclick="handleClick()" />
</body>
</html>