How to Add Button in HTML?

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

Using img tag inside button element

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.

index.html

<form action="/submit-url" method="post">
	<input type="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240905154658/gfglogo.jpg"
		alt="Submit" width="100" height="50">
</form>

Output

How to Add Button in HTML?

yuvrajghule281

Improve

Article Tags :

Similar Reads

How to use SVG Images in HTML?

SVG images are special graphics used in HTML that doesnâ€™t lose quality when resized. They are great for icons, logos, and shapes because they stay clear at any size. To use SVG images in HTML, add them with <img src=" image.svg"> or paste SVG code directly with <SVG>.1. Using SVG Image w

How to use URL of the image as a submit button in HTML ?

The HTML <input> type attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text. In this article, we set the image as button value. It creates the image as the submit button. Syntax: <input type="image"> Attribute

How to Add Button in HTML?

Buttons in HTML are interactive elements that users can click to trigger certain actions, such as submitting forms, navigating to different pages, or executing JavaScript functions. We can use either the <button> tag or <input type="button"> tag to create a button.1. Using <button>

How to align Image in HTML?

Aligning images within a webpage is an essential part of web design. It allows you to control how images are positioned about surrounding content. In HTML, there are several ways to align images using both attributes and CSS techniques, ranging from simple alignment to more advanced responsive layou

How to Use Font Awesome Icons In HTML?

Icons play an important role in our modern applications. If we use good icons in our website then it can attract the user's attention and also help the user to identify which purpose it is used for.PrerequisitesHTMLCSSFont Awesome iconsApproach To Use Font Awesome Icons First, you need to add the Fo

How to Add Link to HTML Button?

A link in HTML connects one webpage to another, allow smooth navigation. In HTML , links are created using the <a> tag. The href attribute within the tag specifies the URL or path to the destination.We are given an HTML button, to add a link to the HTML button, we can wrap the button inside th

How to create an image bullets in HTML ?

In HTML, there are two types of lists: ordered and unordered. Ordered lists are numbered with alphabet letters or Roman numerals, while unordered lists use dots. Sometimes, you may want to replace these bullets with an image to enhance the visual appeal of your web content. To get this, we can use t

How to add icons in the button in HTML ?

Adding icons in buttons in HTML involves including visual symbols or images within buttons to enhance their appearance and usability. This can be done using icon libraries like Font Awesome, Bootstrap Icons, or Material Icons, or by inserting images directly with <img> tags for visual cues.Add

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method

How to render HTML to an image ?

Converting HTML code into an image can be achieved through various methods, such as using the html2canvas JavaScript library or leveraging CSS. This capability is particularly useful for users who wish to share a visual representation of their code without sharing the actual code. This guide will de