teh kc teh kc - 5 months ago 11
HTML Question

How to use a image as a button?

FIDDLE

As you can see that this is a button behind the image. I wanna remove that button. And use the images as button



.buttonup {
padding: 0px;
width: 25px;
cursor: pointer;
margin-right: 25px;
}

.buttondw {
width: 25px;
cursor: pointer;
margin-left: 25px;
}

#count {
display: inline-block;
border-radius: 0px;
background-color: #ff9933;
border: none;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 5px;
width: 50px;
margin-top: 0px;
}

<center>
<button class="buttonup" id="plus" style="vertical-align:middle"><span><img src="http://i.imgur.com/jWPUjR9.png"> </span> </button> <span id="count">0</span>
<button class="buttondw" id="minus" style="vertical-align:middle"><span><img src="http://i.imgur.com/Vu6tuf9.png"> </span> </button>
</center>




Answer

Use input type="image"

You will need to preventDefault() on the click event if you do not want to submit the page or the form it is in

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}

.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}
<center>
  <input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">0</span>
  <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />
</center>