Morphing FAB

<!--
  This is a toggle, so its state lives on aria-pressed - the border-radius and
  colour morph are hung off that same attribute, so the shape can never
  contradict the state a screen reader announces.
-->
<button type="button" aria-pressed="false" aria-label="Start recording" class="fab-morph group fixed bottom-6 right-6 z-40 inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-[0_12px_28px_-8px_rgba(15,23,42,0.45)] transition-all duration-300 hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white aria-pressed:rounded-2xl aria-pressed:bg-rose-600 aria-pressed:hover:bg-rose-700 aria-pressed:focus-visible:ring-rose-600 motion-reduce:transition-none dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950 dark:aria-pressed:bg-rose-500 dark:aria-pressed:focus-visible:ring-rose-400">
  <svg class="h-6 w-6 group-aria-pressed:hidden" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="6" /></svg>
  <svg class="hidden h-5 w-5 group-aria-pressed:block" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>
</button>

<script>
  document.querySelectorAll('.fab-morph').forEach(function (button) {
    button.addEventListener('click', function () {
      var active = button.getAttribute('aria-pressed') !== 'true';
      button.setAttribute('aria-pressed', String(active));
      button.setAttribute('aria-label', active ? 'Stop recording' : 'Start recording');
    });
  });
</script>