如何使 png 图像充当按钮？

Question

I am using Dreamweaver for the first time to code. I am intermediate in HTML.

I've been trying to use a png file as a button. I've found some sources stating that a ...

<button src=Home_button> </button>    

... will work, but I have tried it, and to no avail, it does not work. Any suggestions?

---

NOTE:

I am also using a CSS to build this Very basic website.

Answer 1

Just add background-image to your button.

<button id="home_button">click me</button>

and then add:

#home_button {
  background-image: url(...);
}

You may need to add further styling to it of course, such as widths and other background properties to get it just right. But this is how you add a background image to a button.

Here's a working demo as well:

 #home_button { width: 150px; height: 150px; background-image: url('http://i.stack.imgur.com/sfed8.png'); background-size: cover; background-color: #eee; }

 <button id="home_button"></button>

Answer 2

您可以在button标签中添加一个img标签。

 <button id="bar" type="submit"><img src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" /></button>

Answer 3

There are many ways to create something that looks like an image and behaves like a button.

Here-below are code examples demonstrating 5 options worth considering...

---

Option 1 :

You could put an <img> element inside a <button> element :

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 button, img { padding: 0; font-size: 0; border: none; }

 <button id="myButton"> <img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt=""> </button>

(see also this Fiddle )

---

Option 2 :

You could use an <a> -tag instead :

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 a { border: none; display: inline-block; font-size: 0; }

 <a id="myButton" href="#"> <img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt=""> </a>

(see also this Fiddle )

---

Option 3 :

You could just attach your click handler directly to your image :

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 <img id="myButton" src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">

(see also this Fiddle )

---

Option 4 :

You could set your image as a background-image of a <button> -tag or other tag that represents a button.

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 input[type=submit] { background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150"); width: 150px; height: 150px; border: none; }

 <input type="submit" id="myButton">

(see also this Fiddle )

---

Option 5 :

You could set your image as a background-image of an <a> -tag, a <div> -tag or another tag that doesn't represent a button :

 document.getElementById("myButton").addEventListener("click", function() { alert('Button clicked'); });

 div { background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150"); width: 150px; height: 150px; border: none; }

 <div id="myButton"></div>

(see also this Fiddle )

Answer 4

你可以做<a href="#"><img src="#" alt="" /></a>来实现你想要的。

Answer 5

There are several ways to use an image as a button..

    <a href="your_link.html">
      <img id="mypic' src="path_to_your.png" alt="MyImage" width="200" height="300" />
    </a>
css..
#mypic {
    background: #390239;
    color:#7e4a00;
    border:#7e4a00 2px solid;
    border-color:;
    outline:none;
    padding: 6px;
    border-radius:5px;
    text-align: center;
}

Chris also has a good answer... it depends on what looks good on the page, as well as your coding knowledge.

Answer 6

Here's what you can do...

HTML

<button>Click Me</button>

CSS

button {
  display: inline-block;
  height: 50px // height of your button image
  text-indent: -9999px // hide if you have text inside <button>
  width: 100px // width of your button image
}

Hope this will help :)