Changing background color of button after click

Question

Here is the html code related to my button. As you can see, I've tried adding an id to reference it in CSS and JS.

<div class="col-lg-8 main">
  <h1>Constructive Design</h1>
  <p>
    Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p>
  <button type="button" class="btn btn-primary" id="conbutton">Continue...</button>
</div>

This is the CSS for the main button without hover

.main button{
  background: transparent;
  border: 1.3px solid white;
  margin-top: 50px;
  width: 180px;
  height: 70px;
  color:white;;
}

This is the CSS for main button with hover

.main button:hover{
  background: transparent;
  color: #33ccff;
  border-color: #33ccff;
  transition:all 1.3s;
}

This is the CSS for the class.clbutton which I'll reference in JS.

.conbuttoncl{
  background: transparent;
}

This is the JS where I call that ID which I reference in HTML and add a class.clbutton to it. Let me know if I'm on the wrong track over here and if there's some other way to get at the same thing ie changing background of button to transparent after my mouse clicks on it. I don't want the color of button to change to blue after a user clicks on it.

var conbutton = document.querySelector("#conbutton");
conbutton.addEventListener("click", function(){
  conbutton.classList.add(".conbuttoncl");
});

Answer 1

I changed button colours on all of your different states to show this working as in your question you had them all set to transparent .

Issue 1:

conbutton.classList.add(".conbuttoncl");

should be

conbutton.classList.add("conbuttoncl"); //Without . in class name

Issue 2: You've over specified the .main button class, which means it won't be overridden with the loose .clbutton class. Instead, just make it more precise, so this:

.conbuttoncl {

should be

.main button.conbuttoncl {

Working example:

 var conbutton = document.querySelector("#conbutton"); conbutton.addEventListener("click", function() { conbutton.classList.add("conbuttoncl"); });

 .main button { background: red; border: 1.3px solid white; margin-top: 50px; width: 180px; height: 70px; color: white; ; }.main button:hover { background: green; color: #33ccff; border-color: #33ccff; transition: all 1.3s; }.main button.conbuttoncl { background: blue; }

 <div class="col-lg-8 main"> <h1>Constructive Design</h1> <p> Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p> <button type="button" class="btn btn-primary" id="conbutton">Continue...</button> </div>

Answer 2

You can simply Do it Using JavaScript

 function bgchange() { document.getElementById("conbutton").style.background = "red"; }

 .main button { background: orange; border: 1.3px solid white; margin-top: 50px; width: 180px; height: 70px; color: white; }.main button:hover { background: transparent; color: #33ccff; border-color: #33ccff; transition: all 1.3s; }

 <div class="col-lg-8 main"> <h1>Constructive Design</h1> <p> Aenean fermentum vestibulum ipsum, ut pretium erat sodales sodales. Pellentesque quis orci vitae dui commodo sodales et ut quam. Etiam vitae egestas purus, ut malesuada enim.</p> <button type="button" class="btn btn-primary" id="conbutton" onclick="bgchange()">Continue...</button> </div>