problems with my button background color and hover and active states

Question

I'm working on the Odin project as a way to shake off the rust, being an ex bootcamper from 2 years ago. I'm on the project where you have to take the rock paper scissors game you've made previously and give it a UI, and I'm struggling to get my buttons to look right.

I have 3 square buttons each with a div with an emoji in it, and for some reason these buttons have a white background I am not giving them. they also do not respond to :hover and :active changes I assign them in css. it seems like if I change the background color in the css I have for just button than it changes this white box but still doesn't change hover and active

relevant code:

button{
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  outline: none;
  /* background-color: var(--secondary-dark); */
}
}
.btncontainer{
  display: flex;
  justify-content: space-evenly;
  padding: 30px;
}
.btn{
  border-radius: 10px;
  background-color: var(--secondary-dark);
}
.btnbox{
  width: 160px;
  height: 160px;
}
.sign{
  font-size: 80px;
  margin-bottom: 10px;
}
.btn:hover{
  background-color: var(--secondary-dark-active);
}
.btn:active{
  background-color: var(--secondary-dark-active);
}

<div class="btncontainer">
  <button class="btn, btnbox" id="rockbtn"><div class="sign">✊</div></button>     
  <button class="btn, btnbox" id="scsrbtn"><div class="sign">✌</div></button>
  <button class="btn, btnbox" id="pprbtn"><div class="sign">✋</div></button>
</div>

if I uncomment the line in button then the background color changes to whatever I make it there but this still doesn't fix the hover and active properties.

Answer 1

You need to change the class names to class="btn btnbox". If you want to use multiple class names, you must separate them with a space, not a comma.

<div class="btncontainer">
    <button class="btn btnbox" id="rockbtn"><div class="sign">✊</div></button>     
    <button class="btn btnbox" id="scsrbtn"><div class="sign">✌</div></button>
    <button class="btn btnbox" id="pprbtn"><div class="sign">✋</div></button>
</div>