Кнопка становится неактивной при изменении цвета фона

.btn{
    width: 60px;
    height: 60px;
    margin-left: 30px;
    margin-top: 25px;
    background-color: beige;   
   }
.btn:hover {
  background-color:gray;
}

<div class = "row">
                    <button onclick = "click('7')" class = "btn">7</button>
                    <button onclick = "click('8')" class = "btn">8</button>
                    <button onclick = "click('9')" class = "btn">9</button>
                    <button onclick = "click('/')" class = "btn">/</button>
                </div>

function clicker(val) {
  document.getElementById("screen").value += val 
}

.btn {
  width: 60px;
  height: 60px;
  margin-left: 30px;
  margin-top: 25px;
  background: beige;
  cursor:pointer;
}
.btn:hover{
  background:rgba(0,100,0,0.25)
}

#screen{
  width:25rem;
  height:2rem;
  border:2px solid black;
  margin:2rem 0;
  background: beige;
}

<div class = "row">
  <button onclick = "clicker('7')" class = "btn">7</button>
  <button onclick = "clicker('8')" class = "btn">8</button>
  <button onclick = "clicker('9')" class = "btn">9</button>
  <button onclick = "clicker('/')" class = "btn">/</button>
</div>

<input type='text' id='screen' />

document.querySelector('.row').addEventListener('click',e=>{
  document.querySelector('#screen').value+=e.target.textContent
})

.btn {
  width: 60px;
  height: 60px;
  margin-left: 30px;
  margin-top: 25px;
  background: beige;
  cursor: pointer;
}

.btn:hover {
  background: rgba(0, 100, 0, 0.25)
}

#screen {
  width: 25rem;
  height: 2rem;
  border: 2px solid black;
  margin: 2rem 0;
  background: beige;
}

<div class = "row">
  <button class = "btn">7</button>
  <button class = "btn">8</button>
  <button class = "btn">9</button>
  <button class = "btn">/</button>
</div>
<input type='text' id='screen' />