Mic Recording

<div class="nuda-mic">
  <button class="nuda-mic__btn is-recording" aria-label="Recording">
    <span class="nuda-mic__inner"></span>
    <span class="nuda-mic__ring"></span>
  </button>
  <div class="nuda-mic__time">
    <span class="nuda-mic__dot"></span>
    <span>0:12</span>
  </div>
</div>

.nuda-mic {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.nuda-mic__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,94,122,.1);
  border: 2px solid #ff5e7a;
  cursor: pointer;
  transition: background .25s,transform .2s;
}

.nuda-mic__btn:hover {
  background: rgba(255,94,122,.18);
  transform: scale(1.05);
}

.nuda-mic__inner {
  width: 14px;
  height: 14px;
  background: #ff5e7a;
  border-radius: 4px;
  transition: border-radius .3s,transform .3s;
}

.nuda-mic__btn.is-recording .nuda-mic__inner {
  border-radius: 50%;
  animation: _micPulse 1.4s ease-in-out infinite;
}

.nuda-mic__ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid #ff5e7a;
  opacity: 0;
  animation: _micRing 1.6s ease-out infinite;
}

.nuda-mic__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fafafa;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}

.nuda-mic__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5e7a;
  animation: _micDot 1s ease-in-out infinite;
}

@keyframes _micPulse {
  0%,100% {
    transform: scale(1);
  }
  50% {
    transform: scale(.7);
  }
}

@keyframes _micRing {
  0% {
    transform: scale(1);
    opacity: .7;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes _micDot {
  50% {
    opacity: .3;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mic__btn.is-recording .nuda-mic__inner,.nuda-mic__ring,.nuda-mic__dot {
    animation: none;
  }
}