How to use a image as a button? - html

Question

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 1

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>

Answer 2

you are very close actually, juste add the background:none and border:none on you class :
.buttonup {
padding: 0px;
width: 25px;
cursor: pointer;
margin-right: 25px;
background:none;
border:none;
}

Answer 3

change some css
.buttonup {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 0 none;
cursor: pointer;
padding: 0;
width: 45px;
}
.buttondw {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 0 none;
cursor: pointer;
padding: 0;
width: 45px;
}
https://fiddle.jshell.net/g6Lhurae/25/

Answer 4

Try this:
.buttonup {
padding: 0px;
text-align: center;
width: 50px;
cursor: pointer;
margin-right: 10px;
border:none;
background:none;
}
.buttondw {
width: 50px;
text-align: center;
cursor: pointer;
margin-left: 5px;
border:none;
background:none;
}

Answer 5

tip:don't use the center tag in your html; it's deprecated and not supported in html5. (I know this isn't the question but feel it should be pointed out).
So my css/html for you would be as follows (count css taken from mplungians post)
var counter = 0, // Try change this what ever you want
votePlus = counter + 1,
voteMinus = counter - 1;
function checkIfUserVoted() {
return localStorage.getItem("voted");
}
if (!localStorage.getItem("voted")) {
localStorage.setItem("voted", counter);
$("#count").text(counter);
}
$(".buttonup").click(function() {
var vote = checkIfUserVoted() != votePlus ? votePlus : counter;
localStorage.setItem("voted", vote);
$(this).next().text(vote);
});
$(".buttondw").on('click', function () {
var vote = checkIfUserVoted() != voteMinus ? voteMinus : counter;
localStorage.setItem("voted", vote);
$(this).prev().text(vote);
});
#buttons{margin-left: 35%; margin-right:35%;}
.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;
}
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
<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" />
</div>