<button>在HTML中单击时更改颜色？</button>

Question

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS or do I have to use Javascript?

Thanks in advance

This is the HTML code of my buttons.

<div class="H1toH5">
  <button class="seatButton">H1</button>
  <button class="seatButton">H2</button>
  <button class="seatButton">H3</button>
  <button class="seatButton">H4</button>
  <button class="seatButton">H5</button>
</div>

Answer 1

Pure CSS

1. Change your button to another element (like span )
2. Use a label and checkbox to control the toggle status
3. Use :checked CSS selector and + sibling selector

 .H1toH5 input { display: none; } .H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; } .H1toH5 input:checked + .seatButton { background: red; } 

 <div class="H1toH5"> <label> <input type="checkbox" /> <span class="seatButton">H1</span> </label> <label> <input type="checkbox" /> <span class="seatButton">H1</span> </label> <label> <input type="checkbox" /> <span class="seatButton">H1</span> </label> <label> <input type="checkbox" /> <span class="seatButton">H1</span> </label> <label> <input type="checkbox" /> <span class="seatButton">H1</span> </label> </div> 

Answer 2

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS

Try utilizing css :focus pseudo class , background-color

 button { background-color:yellow; } button:focus { background-color:orange; } 

 <div class="H1toH5"> <button class="seatButton">H1</button> <button class="seatButton">H2</button> <button class="seatButton">H3</button> <button class="seatButton">H4</button> <button class="seatButton">H5</button> </div> 

---

no just the one that is clicked, but i want to be able to click on many buttons not just one

 var elems = document.getElementsByClassName("seatButton"); for (var i = 0; i < elems.length; i++) { elems[i].onclick = function() { var color = window.getComputedStyle(this, null) .getPropertyValue("background-color"); this.style.backgroundColor = color === "rgb(255, 255, 0)" ? "rgb(255, 165, 0)" : "rgb(255, 255, 0)"; }; }; 

 button { background-color:yellow; } 

 <div class="H1toH5"> <button class="seatButton">H1</button> <button class="seatButton">H2</button> <button class="seatButton">H3</button> <button class="seatButton">H4</button> <button class="seatButton">H5</button> </div> 

Answer 3

You can do this with css a ::before pseudo element and the html checkbox input tag

 input.toggle-btn { visibility: hidden; } input.toggle-btn::before { content: attr(value); display: inline-block; padding: 5px; background: #fff; font-size: 14pt; color: #aaa; border-radius: 5px; border: 1px solid #aaa; visibility: visible; } input.toggle-btn:checked::before { background: rgb(50,150,250); color: #eee; border-color: #eee; } 

 <input class="toggle-btn" type="checkbox" value="Hello"> 

Answer 4

No. You need to add/remove a class with javascript. To make @tpie feel better about himself, here is the code for that. Using jQuery:

$('.seatButton').on('click', function(){
    $(this).toggleClass('is-active');
});

Answer 5

This code will toggle a specific class when you click on it. If you click on the button again it will then return to it's original state.

    $('.seatButton').click(function () { 
       $(this).toggleClass('activeClass');
    }); 

Or just use the CSS Pseudo selected as people have specified above. There are many ways to achieve what you want!