How to Use Images as Buttons in HTML?

Last Updated : 21 May, 2025

Images can work like buttons to make a website more interactive and visually appealing. Over 70% of modern websites include image-based elements to enhance user experience. This article shows different ways to turn images into clickable buttons using simple HTML.

1. Using the img Tag Inside the Button Element

We can wrap the <img> tag inside a <button> element. This technique is useful for creating interactive buttons that feature custom images, while still utilizing the semantic and interactive features of the <button> element.

index.html

<button type="button"onclick="alert('Image Button clicked!')">
	<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240905154658/gfglogo.jpg"
     	 alt="Button Image" style="width: 50px; height: 50px;">
</button>

Output

2. Using <button> Element with Background Images

This approach involves applying a background image to a standard <button> element. It provides the flexibility of using CSS for styling and interaction effects. The button element in HTML creates a clickable button on your web page, By default, it has text or a label, but you can customize it to include images or styles.

index.html

<!DOCTYPE html>
<html>

<head>
    <style>
        .image-button {
             width: 100px;
             height: 100px;
             background-image: url(
    'https://media.geeksforgeeks.org/wp-content/uploads/20240905154658/gfglogo.jpg');
             background-size: cover;
             border: none;
             cursor: pointer;
          }
    </style>
</head>

<body>
    <button class="image-button" onclick="alert('Button clicked!')">
    </button>
</body>

</html>

Output

Using button element with background images

3. Using <input> Element with Image Type

We will use the <input> element with type="image". It creates an image-based submit button that can be used in forms. This approach is straightforward and adds a nice visual touch to you site. IN HTML, <input> element is used to create interactive controls in a web form.