FAB Speed Dial Menu — Free HTML CSS JS Floating Action Button Snippet

<div class="speed-dial" id="speedDial">
  <div class="dial-actions" id="dialActions">
    <button class="dial-item" style="--i: 0" onclick="handleAction('share')" aria-label="Share">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 10.6l6.8-3.8M8.6 13.4l6.8 3.8"/></svg>
      <span class="dial-tooltip">Share</span>
    </button>
    <button class="dial-item" style="--i: 1" onclick="handleAction('edit')" aria-label="Edit">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
      <span class="dial-tooltip">Edit</span>
    </button>
    <button class="dial-item danger" style="--i: 2" onclick="handleAction('delete')" aria-label="Delete">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
      <span class="dial-tooltip">Delete</span>
    </button>
  </div>

  <button class="dial-main" id="dialMain" onclick="toggleDial()" aria-label="Open actions menu" aria-expanded="false">
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"/>
      <line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
  </button>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #f8fafc; margin: 0; min-height: 100vh; }

.speed-dial {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.dial-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.dial-item {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #1e293b;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  /* Hidden and collapsed by default; each item transitions independently
     with a delay based on its --i custom property, producing a stagger. */
  opacity: 0;
  transform: scale(0.4) translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0s;
}
.dial-item.danger:hover { color: #ef4444; }
.dial-item:hover { background: #f1f5f9; }

.speed-dial.open .dial-item {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  transition-delay: calc(var(--i) * 0.05s);
}

.dial-tooltip {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.dial-item:hover .dial-tooltip { opacity: 1; }

.dial-main {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #6366f1;
  box-shadow: 0 8px 20px rgba(99,102,241,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.3s ease;
}
.dial-main:hover { background: #4f46e5; }
.dial-main svg { transition: transform 0.3s ease; }

/* The + icon rotates 45deg to visually become an X when the dial is open. */
.speed-dial.open .dial-main svg { transform: rotate(45deg); }

const speedDial = document.getElementById('speedDial');
const dialMain = document.getElementById('dialMain');

function toggleDial() {
  const isOpen = speedDial.classList.toggle('open');
  dialMain.setAttribute('aria-expanded', String(isOpen));
}

function handleAction(action) {
  // Replace with real behavior per action, e.g. opening a share sheet,
  // navigating to an edit form, or confirming a delete.
  console.log('Speed dial action:', action);
  toggleDial();
}

// Close the dial when clicking anywhere outside it.
document.addEventListener('click', (e) => {
  if (!speedDial.contains(e.target) && speedDial.classList.contains('open')) {
    toggleDial();
  }
});