How can I make png image act as a button?

问题

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.

回答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>

回答2:

You can add an img tag inside your button tag.

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

回答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)

回答4:

You could do <a href="#"><img src="#" alt="" /></a> to achieve what you want.

回答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.

回答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 :)

来源：https://stackoverflow.com/questions/35838565/how-can-i-make-png-image-act-as-a-button

标签

javascript

html

css

image

button