How to add an image to a button in html?

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: