Stopwatch in javascript

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Stopwatch</title>
  </head>
  <body>
    <div class="container">
      <h1>Stopwatch</h1>

      <div id="time">00:00:00</div>

      <div class="btns-container">
        <button id="start_btn" onclick="start()">START</button>
        <button id="pause_btn" onclick="pause()">PAUSE</button>
        <button id="reset_btn" onclick="reset()">RESET</button>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

CSS

body {
  background: gainsboro;
  margin: 0;
  box-sizing: border-box;
}

.container {
  text-align: center;
}

#time {
  font-size: 50px;
}

.btns-container {
  margin: 10px 0;
}

button {
  padding: 8px 15px;
  border: none;
  border-radius: 2px;
  color: white;
  cursor: pointer;
}
button:hover {
  filter: grayscale(0.5);
}
button:focus {
  outline: none;
}

#start_btn {
  background: green;
}
#pause_btn {
  background: blue;
  display: none;
}
#reset_btn {
  background: red;
  display: none;
}

JavaScript

const timer = document.querySelector('#time');
const start_btn = document.querySelector('#start_btn');
const pause_btn = document.querySelector('#pause_btn');
const reset_btn = document.querySelector('#reset_btn');

let time = 0,
  interval;

function showTime() {
  time += 1;
  timer.innerHTML = toHHMMSS(time);
}

function start() {
  interval = setInterval(showTime, 1000);
  hideBtn([start_btn]);
  showBtn([pause_btn, reset_btn]);
}

function pause() {
  if (interval) {
    clearInterval(interval);
    interval = null;
    pause_btn.innerHTML = 'RESUME';
  } else {
    interval = setInterval(showTime, 1000);
    pause_btn.innerHTML = 'PAUSE';
  }
}

function reset() {
  clearInterval(interval);
  interval = null;
  pause_btn.innerHTML = 'PAUSE';
  time = 0;
  timer.innerHTML = toHHMMSS(time);
  hideBtn([pause_btn, reset_btn]);
  showBtn([start_btn]);
}

function toHHMMSS(time) {
  let hours = Math.floor(time / 3600);
  let minutes = Math.floor((time - hours * 3600) / 60);
  let seconds = time - hours * 3600 - minutes * 60;

  hours = `${hours}`.padStart(2, '0');
  minutes = `${minutes}`.padStart(2, '0');
  seconds = `${seconds}`.padStart(2, '0');

  return hours + ':' + minutes + ':' + seconds;
}

function showBtn(btnArr) {
  btnArr.forEach((btn) => (btn.style.display = 'inline-block'));
}
function hideBtn(btnArr) {
  btnArr.forEach((btn) => (btn.style.display = 'none'));
}