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:
xxxxxxxxxx1
<input type="image" src="https://my-website.com/example.png" onclick="handleClick()" />
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.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
input {7
height: 50px;8
margin: 0 0 0 25px;9
}10
11
</style>12
<script>13
14
function handleClick(){15
console.log('Button clicked...');16
}17
18
</script>19
</head>20
<body>21
<p>Click the button:</p>22
<input type="image"23
src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"24
onclick="handleClick()" />25
</body>26
</html>