HTML Image Button

The image buttons in the HTML document can be created by using the type attribute of an <input> element. Image buttons also perform the same function as submit buttons, but the only difference between them is that you can keep the image of your choice as a button.

Syntax

<input type="image" name="Name of image button" src="Path of the Image file? border="Specfiy Image Border " alt="text">

Examples

Example 1: This example is used to specify the image button without using CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of image button
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a page*/
Body {
  font-family: Calibri, Helvetica, sans-serif;
  background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color for specifying the lightblue color as a background */  
.container {
    padding: 50px;
  background-color: lightblue;
}
/* The following tag selector input uses the different properties for specifying the text field. */
input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus {
  background-color: orange;
  outline: none;
}
 div {
            padding: 10px 0;
         }
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>  <h1> Registration Form</h1> </center>
<hr>
<label> Firstname: </label> 
<input type="text" name="firstname" placeholder= "Firstname" size="15" required /> 
<label> Middlename: </label> 
<input type="text" name="middlename" placeholder="Middlename" size="15" required /> 
<label> Lastname: </label>  
<input type="text" name="lastname" placeholder="Lastname" size="15"required /> 
<div>
<label> 
Course :
</label> 
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label> 
Gender :
</label>
<br>
<input type="radio" value="Male" name="gender" checked > Male 
<input type="radio" value="Female" name="gender"> Female 
<input type="radio" value="Other" name="gender"> Other
</div>
<!-- The following tag input uses the type attribute which specifies the image, and the src attribute for specifying the path of an image, with the height and width attributes. -->
<input type="image" src="https://www.freepngimg.com/thumb/submit_button/25497-9-submit-button-photos.png" name="submit" width="100" height="48" alt="submit"/>

</form>
</body>  
</html>

Test it Now

Output:

Example 2: This example is used to specify the image button using CSS style. Its output is also same as the above example but the implementation is different.

In the following example, we are using the <button> tag for specifying the image button on a web page.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of image button
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a page*/
Body {
  font-family: Calibri, Helvetica, sans-serif;
  background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color for specifying the lightblue color as a background */  
.container {
    padding: 50px;
  background-color: lightblue;
}
/* The following tag selector input uses the different properties for specifying the text field. */
input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
} 
/* The following tag selector button uses the different properties for specifying the image button on a page. */
  button { 
            background-image: url( 
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTP6zIlxzaUIA_CPMpDXoJXporQUagBpwplwm3tUro3BQDZgNaa'); 
            width: 230px; 
            height: 150px;     
        } 

input[type=text]:focus {
  background-color: orange;
  outline: none;
}
 div {
            padding: 10px 0;
         }
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>  <h1> Registration Form</h1> </center>
<hr>
<label> Firstname: </label> 
<input type="text" name="firstname" placeholder= "Firstname" size="15" required /> 
<label> Middlename: </label> 
<input type="text" name="middlename" placeholder="Middlename" size="15" required /> 
<label> Lastname: </label>  
<input type="text" name="lastname" placeholder="Lastname" size="15"required /> 
<div>
<label> 
Course :
</label> 
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label> 
Gender :
</label>
<br>
<input type="radio" value="Male" name="gender" checked > Male 
<input type="radio" value="Female" name="gender"> Female 
<input type="radio" value="Other" name="gender"> Other
</div>
<button type="submit"> </Button>

</form>
</body>  
</html>

Test it Now

Output: