Sometimes, we want to add image icon to input type="button" with HTML and CSS.
In this article, we’ll look at how to add image icon to input type="button" with HTML and CSS.
How to add image icon to input type="button" with HTML and CSS?
To add image icon to input type="button" with HTML and CSS, we add it as a background image.
For instance, we write
<button type="submit"><img /> Text</button>
to add a button with an img element inside.
Then we write
button img {
background-image: url(https://picsum.photos/30/30);
background-repeat: no-repeat;
background-position: left;
padding-left: 0px;
}
to style the img element with the background image styles.
We add background-image: url(https://picsum.photos/30/30) to set the background image URL.
We disable background repeat with background-repeat: no-repeat;.
And we set the background position with background-position: left;.
Conclusion
To add image icon to input type="button" with HTML and CSS, we add it as a background image.
