.block::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  content: "";
}

.block {
  position: relative;
}
.block::before {
  position: absolute;
  inset: 0;
  content: "";
}

<button id="start">Включить микрофон</button>

const btn = document.getElementById("start");

btn.onclick = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const ctx = new AudioContext();
  await ctx.resume(); // требуется в некоторых браузерах
  const src = ctx.createMediaStreamSource(stream);

  const analyser = ctx.createAnalyser();
  const data = new Uint8Array(analyser.frequencyBinCount);
  src.connect(analyser);

  function animate() {
    analyser.getByteFrequencyData(data);
    const volume = data.reduce((a, b) => a + b, 0) / data.length;
    const hue = Math.min(360, volume * 3);
    document.body.style.background = `hsl(${hue}, 80%, 50%)`;
    requestAnimationFrame(animate);
  }

  animate();
  btn.remove();
};

• hidden;
• password;
• checkbox;
• radio;
• file;
• submit;
• image;
• reset;
• button.

@layer reset, base, components, utilities;

@layer base {
button {
font-size: 1rem;
}}

@layer components {
.btn-primary {
font-size: 1.1rem;
}}

@layer utilities {
.fs-lg {
font-size: 1.25rem;
}}