How to add image icon to input type=”button” with HTML and CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *