How to use a image as a button?

Question

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>

You can make a div with a "background-image(url:yourimage.jpg)". Then make that div respond to click events — Zapp, Jun 16 '16 at 13:14

score 2 · Accepted Answer · answered Jun 16 '16 at 13:20

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>

score 2 · Answer 2 · answered Jun 16 '16 at 13:24

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;
}

answered Jun 16 '16 at 13:24

Mat

435
3
12

score 1 · Answer 3 · answered Jun 16 '16 at 13:21

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/

score 1 · Answer 4 · answered Jun 16 '16 at 13:23

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;
}

score 1 · Answer 5 · answered Jun 16 '16 at 13:36

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>

How to use a image as a button?

5 Answers5