HTML - button with image

3 points
Created by:

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="" 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>

    input {
      height: 50px;
      margin: 0 0 0 25px;


    function handleClick(){
        console.log('Button clicked...');

  <p>Click the button:</p>
  <input type="image"
         onclick="handleClick()" />
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.

❤️💻 🙂