Firefox CSS Issue

See image 1 and 2. the button doesn't disappear after the card is flipped.

HTML
<div class="front">
            <button id="front-button">Hover Me!</button>
          </div>

JS
const isMobile = window.innerWidth < 768;

const buttonText = isMobile ? 'Tap Me!' : 'Hover Me!';
document.getElementById('front-button').textContent = buttonText;

CSS
.front button {
  width: 120px;
  border: 1px solid black;
  background: black;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 20px;
  color: rgb(255, 255, 255);
  text-align: center;
}


These are the code for the button
image.png
image.png
Was this page helpful?