How to Make an Image Button in HTML

In this article, we will see how to make an image button in HTML. To create an image button follow these simple steps.

Steps to create an image button

Create a button using <button> tag.
If you want to link to any website on the button, the <button> tag should be placed inside the <a> tag. You can link to your webpage using the “href” attribute of the anchor tag.
In CSS, to create an image button we should use the “background-image” and insert your image path as in the below code.
Run your code, your image button is displayed successfully.

Code:

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
  .b1{
   background-image: url(./sas.jpg);
   color: yellow; }

  button{
   font-weight: bold;
   border: 1px black solid;
   background-size: cover; }

</style>
<body>
<a href="https://wonderdevelop.com"><button class="b1">Button 1</button></a>
</body>
</html>

Output: