Languages
[Edit]
EN

HTML - button with image

3 points
Created by:
Inayah-Alexander
437

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 to image so 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>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join