In this post, we will learn to add an image to a button in HTML. There are two ways to add an image to a button. Let’s see these two methods.
Let’s see the first method.
Adding image to the button using the <button> and <img> tag.
In this method, you utilize the <button> and the <img> tag of HTML. You just place the <img> tag inside the <button> tag and your button is now an image button. Let me give you an example now.
<!DOCTYPE html>
<html>
<head>
<title>HTML image button</title>
<style>
#img-button{
background-color: white;
border: none;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Android Info</h1>
<P>Android is a mobile operating system based on a modified version of the
Linux kernel and other open source software, designed primarily for
touchscreen mobile devices such as smartphones and tablets. Android is
developed by a consortium of developers known as the Open Handset Alliance and commercially
sponsored by Google. It was unveiled in November 2007,with the first commercial Android device,
the HTC Dream, being launched in September 2008.</P>
<button id="img-button" type="button"><img src="call-to-action.png" alt="ReadMore" height="60" width="110"></button>
</body>
</html>
Pay attention to the <button> tag. I have used the <img> tag inside the <button> tag. Also, I have applied some CSS to the button so that it looks a little better. Now, let’s see the output.
Output :
Now, let’s see the second method.
Adding image to the button using the <input> tag.
In this method, you use the <input> tag with the type attribute set to “image”. Let’s see an example.
<!DOCTYPE html>
<html>
<head>
<title>HTML image button</title>
<style>
div{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<label for="userId">User ID</label><br>
<input type="text" id="userId" name="userId"><br>
<label for="password">Password</label><br>
<input type="password" id="password" name="password">
</div>
<input type="image" id="image" alt="Login"
src="submit.png" height="25" width="65">
</body>
</html>
You can see in the above code that I have set the type attribute to “image”. Let’s see the output.
Now you know the two methods of adding an image to the button.
Goodbye.
DeveloperXon 
Leave a Reply