Embed Image in a Button in HTML
-
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="/img/DelftStack/logo.png" height ="90" width="480" /></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="/img/DelftStack/logo.png" style="border: double;" height="90" width="480"/>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedInRelated Article - HTML Button
- Right Align a Button in HTML
- Hide HTML Buttons and Show Them Using Onclick
- Add Space Between Buttons in HTML
- Create Link in HTML Button
