FAB Action Button

<div class="nuda-fab">
  <button type="button" class="nuda-fab__action" style="--i:1" aria-label="Camera">…</button>
  <button type="button" class="nuda-fab__action" style="--i:2" aria-label="Note">…</button>
  <button type="button" class="nuda-fab__action" style="--i:3" aria-label="Mic">…</button>
  <button type="button" class="nuda-fab__main" aria-label="Open menu" aria-expanded="true">×</button>
</div>

/* FAB Floating Action Button
   Main button rotates to an X and reveals a stack of actions.
   Customize: --fab-accent, --fab-size */

.nuda-fab {
  --fab-accent: #e4ff54;
  --fab-size: 56px;
  position: relative;
  width: 60px;
  height: 200px;
}

.nuda-fab__main {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  border: 0;
  background: var(--fab-accent);
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px -4px rgba(228, 255, 84, 0.55);
  animation: nuda-fab-rot 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.25s;
}

.nuda-fab__main:hover { transform: scale(0.96); }

.nuda-fab__action {
  position: absolute;
  bottom: 0;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #111114;
  color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  animation: nuda-fab-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 0.07s);
}

.nuda-fab__action:hover { background: #1a1a20; }

@keyframes nuda-fab-rot {
  from { transform: rotate(0deg) scale(0.7); opacity: 0; }
  to { transform: rotate(135deg) scale(1); opacity: 1; }
}

@keyframes nuda-fab-pop {
  from { opacity: 0; transform: translateY(0) scale(0.4); }
  to {
    opacity: 1;
    transform: translateY(calc(-58px - (var(--i) - 1) * 46px)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-fab__main, .nuda-fab__action { animation: none; opacity: 1; }
  .nuda-fab__main { transform: rotate(135deg); }
}