UI Components Easy

Floating Action Button

A FAB that expands into a speed-dial of sub-actions on click. Supports icon rotation, backdrop, and individual sub-action labels. No libraries.

Open in Lab

css vanilla-js

Targets: JS HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f5f7;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.page {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  background: #fff;
  position: relative;
  overflow: hidden;
}

header {
  padding: 24px 20px 16px;
  border-bottom: 1px solid #f0f0f0;
}

header h1 {
  font-size: 22px;
  font-weight: 700;
  color: #111;
}

.content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
}

.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.av1 {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.av2 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.av3 {
  background: linear-gradient(135deg, #10b981, #3b82f6);
}

.post-body strong {
  font-size: 14px;
  color: #111;
  display: block;
  margin-bottom: 4px;
}
.post-body p {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* FAB backdrop */
.fab-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 98;
}

.fab-backdrop.visible {
  opacity: 1;
  pointer-events: all;
}

/* FAB container */
.fab-container {
  position: fixed;
  bottom: 28px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 99;
}

/* Main FAB */
.fab-main {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #6366f1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
  flex-shrink: 0;
}

.fab-main:active {
  transform: scale(0.92);
}

.fab-container.open .fab-main {
  transform: rotate(45deg);
}

.fab-icon {
  width: 22px;
  height: 22px;
  color: #fff;
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* Sub-actions */
.fab-action {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab-container.open .fab-action {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Stagger delays */
.fab-action:nth-child(4) {
  transition-delay: 0.03s;
}
.fab-action:nth-child(3) {
  transition-delay: 0.07s;
}
.fab-action:nth-child(2) {
  transition-delay: 0.11s;
}
.fab-action:nth-child(1) {
  transition-delay: 0.15s;
}

.fab-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.fab-action-btn:active {
  transform: scale(0.9);
}

.fab-action-btn svg {
  width: 18px;
  height: 18px;
  color: #6366f1;
}

.fab-action-label {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  background: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

const fabContainer = document.getElementById("fabContainer");
const fabMain = document.getElementById("fabMain");
const backdrop = document.getElementById("fabBackdrop");
let isOpen = false;

function openFab() {
  isOpen = true;
  fabContainer.classList.add("open");
  backdrop.classList.add("visible");
  fabMain.setAttribute("aria-expanded", "true");
  fabMain.setAttribute("aria-label", "Close actions");
}

function closeFab() {
  isOpen = false;
  fabContainer.classList.remove("open");
  backdrop.classList.remove("visible");
  fabMain.setAttribute("aria-expanded", "false");
  fabMain.setAttribute("aria-label", "Open actions");
}

fabMain.addEventListener("click", () => (isOpen ? closeFab() : openFab()));

backdrop.addEventListener("click", closeFab);

// Sub-action buttons
document.querySelectorAll(".fab-action-btn").forEach((btn) => {
  btn.addEventListener("click", () => {
    closeFab();
  });
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && isOpen) closeFab();
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Floating Action Button</title>
  </head>
  <body>
    <div class="page">
      <header>
        <h1>Feed</h1>
      </header>

      <div class="content">
        <div class="post-card">
          <div class="post-avatar av1"></div>
          <div class="post-body">
            <strong>Alex Morgan</strong>
            <p>Just shipped a new mobile component. The FAB pattern is one of my favorites for content creation flows.</p>
          </div>
        </div>
        <div class="post-card">
          <div class="post-avatar av2"></div>
          <div class="post-body">
            <strong>Sam Rivera</strong>
            <p>Tap the + button in the bottom right to see the speed-dial expand!</p>
          </div>
        </div>
        <div class="post-card">
          <div class="post-avatar av3"></div>
          <div class="post-body">
            <strong>Jordan Lee</strong>
            <p>Material Design FABs are perfect for mobile apps where screen space is precious.</p>
          </div>
        </div>
      </div>

      <!-- FAB backdrop -->
      <div class="fab-backdrop" id="fabBackdrop"></div>

      <!-- FAB container -->
      <div class="fab-container" id="fabContainer">
        <!-- Sub-actions (rendered from bottom to top) -->
        <div class="fab-action" data-label="New Post">
          <button class="fab-action-btn" aria-label="New Post">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
          </button>
          <span class="fab-action-label">New Post</span>
        </div>
        <div class="fab-action" data-label="Upload Photo">
          <button class="fab-action-btn" aria-label="Upload Photo">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
          </button>
          <span class="fab-action-label">Upload Photo</span>
        </div>
        <div class="fab-action" data-label="Create Story">
          <button class="fab-action-btn" aria-label="Create Story">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
          </button>
          <span class="fab-action-label">Create Story</span>
        </div>
        <div class="fab-action" data-label="Add Link">
          <button class="fab-action-btn" aria-label="Add Link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
          </button>
          <span class="fab-action-label">Add Link</span>
        </div>

        <!-- Main FAB -->
        <button
          class="fab-main"
          id="fabMain"
          aria-label="Open actions"
          aria-expanded="false"
          aria-haspopup="true"
        >
          <svg class="fab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <line x1="12" y1="5" x2="12" y2="19"/>
            <line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
        </button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Floating Action Button

A Material Design-inspired FAB with an expand animation that reveals sub-action buttons in a speed-dial pattern. The main icon rotates 45° on open to form an × close indicator.

How it works

Clicking the FAB toggles .open on the container
Sub-action buttons stagger in from bottom to top using CSS transition-delay
Each sub-action has an icon button and a label that fades in on the right
A semi-transparent backdrop click closes the FAB

Variants

4 sub-actions: New Post, Upload Photo, Create Story, Add Link
Easy to extend with more actions or reduce to 2–3

When to use it

Mobile-first dashboards with a primary create action
Social apps with multiple content creation types
Any app where a traditional toolbar takes too much space