How To Create Button On Image In Html

HowTo
HTML Howtos
Embed Image in a Button in HTML

Embed Image in a Button in HTML

Created: August-20, 2021

Use the <img> Tag Inside the <button> Tag to Embed Image in the HTML Button
Use the <input type="image">Tag to Embed an Image in the HTML Button

This article will discuss several methods to embed an image in a <button> element in HTML. It means to fix or set a picture inside the HTML button.

Use the `<img>` Tag Inside the `<button>` Tag to Embed Image in the HTML Button

This <img> tag is used to embed an image on an HTML page. The images are not literally placed into the webpage; images are linked to the webpages by given pathways. This tag generates a space for the particular image. The tag has two required attributes, namely src and alt. We can create a clickable HTML button using the <button> tag in HTML. Placing the <img> tag inside the <button> tag creates a clickable HTML button with an image embedded in it.

For example, inside the HTML body, open the <button> tag. Specify type as button. Then, open the <img> tag and specify the image URL in the src attribute. Next, set height and width to 80 and 100 respectively. Finally, close all the previously opened tags in the following lines.

In the example below, we created a <button> element and inserted an image inside it to be embedded inside the button. We used a URL shortener to place the short URL of the image in the src tag. Thus, a button with an image can be created in HTML.

Example Code:

              <body> <button type="button"> <img src="https://bit.ly/3BF9FD7" height ="80" width="100" /></button> </body>

Use the `<input type="image">`Tag to Embed an Image in the HTML Button

The <input> tag specifies a input field where we can enter our data. There are many input types and control widgets allowed in HTML. Some of them are <input type="button">, <input type="color"> , <input type="email">, <input type="text">. We can set the type attribute to image and set the src to embed an image in the input type. It will function as a button.

For example, inside the HTML body, open the <input> tag and specify type to image. Then, type the image URL in the src attribute. Next, write the style attribute and set the border to double. Also, add the height and width as 80 and 170. Then, close the input tag and all the previously opened tags.

The example below illustrates a method to embed an image on an HTML page. The <type="image"> tag specifies that we are inserting or using an image in our work. We have used the inline CSS to set the image's border, height and width. We did this to make the image look more like a button. The value double specifies that a double border is used outside the image button. The height and width help the image to get into a definite size. If we don't specify the height and width of an image, the page might flicker when the image loads. In this way, we can embed an image in an HTML button.

Example Code:

              <input type="image" src="https://bit.ly/3i38DsL" style="border: double;" height="80" width="170"/>

Contribute

DelftStack is a collective effort contributed by software geeks like you. If you like the article and would like to contribute to DelftStack by writing paid articles, you can check the write for us page.