To generate image buttons in an HTML file, you can utilize the type attribute within a specific element. Image buttons serve a similar purpose to submit buttons, with the key distinction being the ability to incorporate a customized image as the button itself.
Syntax
<input type="image" name="Name of image button" src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"Specfiy Image Border " alt="text">
Examples
Illustration 1: This instance demonstrates the specification of an image button without reliance on 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://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" name="submit" width="100" height="48" alt="submit"/>
</form>
</body>
</html>
Output:
Illustration 2: This instance demonstrates the specification of an image button through the utilization of CSS styling. The outcome remains identical to the previous illustration, yet the approach varies.
In this instance, we are utilizing the <button> tag to designate the image button within a webpage.
<!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>
Output:
Browser Support
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| Image Button | Yes | Yes | Yes | Yes | Yes |
Attributes
The attribute is utilized to define the alternative text that appears when the image is unavailable for display on the user's screen.
Border:
This property is utilized to define the border of an image. When setting its value to 0, no border will be rendered around the image.
Height:
This property is employed to specify the pixel height of an image.
Name:
This property is employed to specify the title of an image.
The attribute is utilized for indicating the path of an image that should be displayed as a button.
Width:
This property is utilized to specify the pixel dimensions determining the width of an image.