Component Deep Dive #20: FAB Floating Action Button - The Most Important Mobile Button

Web Component Dictionary v2.0 - 83 Components / 8 Categories / Bilingual / Live Preview
Live Demo | Buy

WhatsApp compose, Google Maps navigate, Gmail compose - the FAB is always there, always thumb-distance away.

The Layout Trick

.ef-fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}

column-reverse keeps the main FAB at the bottom while sub-items stack upward. No manual positioning needed.

Staggered Animation

.ef-fab-item:nth-child(1) { transition-delay: 0.05s; }
.ef-fab-item:nth-child(2) { transition-delay: 0.10s; }
.ef-fab-item:nth-child(3) { transition-delay: 0.15s; }

Critical Pitfall

position: fixed gets clipped by any ancestor with overflow: hidden. Watch out when placing FAB inside modals or scroll containers.

Hidden sub-items must have pointer-events: none - otherwise they are invisible but still clickable.

Full code and bilingual article