“Button” shrinking after applying JS function

I am trying to build a timer. I am in the process of coding the play and reset button. It seems to work well, except that the “button” for the play or reset button would shrink after I clicked it once, and a refresh is needed to make it the original size again. I have tried to see if there is something wrong with my code, and I am sure there is one, but I just can’t find it. Here is what it is supposed to look like.

But after I clicked it, I got this.

Any idea as to why this would happen? All responses or answers will be greatly appreciated. Thank you! Here is the code…

const app = () => {
  const song = document.querySelector(".song");
  const play = document.querySelector(".play");

  play.addEventListener("click", () => {
    checkPlaying(song);
  });

  const checkPlaying = (song) => {
    if (song.paused) {
      song.play();
      play.textContent = `Pause`;
    } else {
      song.pause();
      play.innerHTML = `Play`;
    }
  };
}

app();

.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.play {
  background: #989c99;
  box-shadow: #656a66 0px 6px 0px;
  padding: 1rem 2rem;
  margin-right: 2rem;
}

.reset {
  background: #989c99;
  box-shadow: #656a66 0px 6px 0px;
  padding: 1rem 2rem;
  margin-left: 2rem;
}

<div class="player-container">
  <audio class="song">
    <source src="../sounds/bg-sound.mp3" />
  </audio>
  <div class="play">
    <h3>Play</h3>
  </div>
  <div class="reset">
    <h3>Reset</h3>
  </div>
</div>

Answer

It’s because by default there is an h3 tag inside the “button” with the text Play but after clicking only the text Pause is there, right inside the “button”.

Using h3 tag inside those buttons is incorrect anyway, so feel free to remove them. h3 tag has semantic meaning and is for headings, not for styling. If you want to make the text bigger, use CSS, not tags.

Also, instead of using a simple div for your button, use the button element, as it’s what it’s there for.

const app = () => {
  const song = document.querySelector(".song");
  const play = document.querySelector(".play");

  play.addEventListener("click", () => {
    checkPlaying(song);
  });

  const checkPlaying = (song) => {
    if (song.paused) {
      song.play();
      play.textContent = `Pause`;
    } else {
      song.pause();
      play.innerHTML = `Play`;
    }
  };
}

app();

.player-container {
  align-items: center;
  display: flex;
  justify-content: center;
}

button {
  background: #989c99;
  box-shadow: #656a66 0 6px 0;
  font-size: 1.5rem;
  margin-right: 2rem;
  padding: 1rem 2rem;
}

<div class="player-container">
  <audio class="song">
              <source src="../sounds/bg-sound.mp3" />
  </audio>
  <button class="play">
    Play
  </button>
  <button class="reset">
    Reset
  </button>
</div>