32 CSS Floating Action Button Designs 11 / 32

Compose + Tooltip FAB

Floating compose button with 3 tooltip styles: left hover tooltip, bottom fade tooltip, and slide-extend label.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="fb11">
<h1>Floating Compose Button</h1>
<p class="fb11-sub">Three label tooltip styles — hover reveal, bottom fade, and slide-extend. Each pattern for a different layout context.</p>

<div class="fb11-inbox">
  <div class="fb11-inbox-header">
    <h2>Inbox</h2>
    <span>3 unread</span>
  </div>

  <div class="fb11-mail-item fb11-unread">
    <div class="fb11-mail-avatar fb11-av--a">A</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Alex Chen</div>
      <div class="fb11-mail-subject">Re: Q3 design system updates</div>
      <div class="fb11-mail-preview">Here are the final tokens and component specs...</div>
    </div>
    <div class="fb11-mail-time">9:41 AM</div>
  </div>

  <div class="fb11-mail-item fb11-unread">
    <div class="fb11-mail-avatar fb11-av--b">M</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Mia Torres</div>
      <div class="fb11-mail-subject">Figma handoff is ready</div>
      <div class="fb11-mail-preview">I've published all the frames, you can access the...</div>
    </div>
    <div class="fb11-mail-time">8:15 AM</div>
  </div>

  <div class="fb11-mail-item fb11-unread">
    <div class="fb11-mail-avatar fb11-av--e">S</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Sam Rivera</div>
      <div class="fb11-mail-subject">Can we ship the FAB by Friday?</div>
      <div class="fb11-mail-preview">The client loved the tooltip direction, just wants...</div>
    </div>
    <div class="fb11-mail-time">Yesterday</div>
  </div>

  <div class="fb11-mail-item">
    <div class="fb11-mail-avatar fb11-av--c">J</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Jordan Kim</div>
      <div class="fb11-mail-subject">Weekly standup notes</div>
      <div class="fb11-mail-preview">Attached are the notes from today's call. Key...</div>
    </div>
    <div class="fb11-mail-time">Mon</div>
  </div>

  <div class="fb11-mail-item">
    <div class="fb11-mail-avatar fb11-av--d">L</div>
    <div class="fb11-mail-info">
      <div class="fb11-mail-from">Lisa Park</div>
      <div class="fb11-mail-subject">Invoice #2047 approved</div>
      <div class="fb11-mail-preview">Payment will be processed within 5 business days...</div>
    </div>
    <div class="fb11-mail-time">Sun</div>
  </div>

  <!-- FAB VARIANT 1: tooltip left -->
  <div class="fb11-fab-wrap">
    <button class="fb11-fab-compose" aria-label="Compose new email">
      <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
      <span class="fb11-badge">3</span>
    </button>
    <span class="fb11-fab-tooltip">Compose email</span>
  </div>
</div>

<!-- Two more variants shown below the inbox -->
<div style="display:flex;gap:48px;margin-top:40px;align-items:flex-end;flex-wrap:wrap;justify-content:center">

  <!-- Variant 2: bottom label -->
  <div class="fb11-fab-wrap fb11-fab-wrap--bottom" style="position:static">
    <button class="fb11-fab-compose fb11-fab-compose--b" style="background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 6px 22px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.2)" aria-label="New post">
      <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
    </button>
    <span class="fb11-fab-lbl-bottom">New post</span>
    <p style="font-size:.72rem;color:#9ca3af;text-align:center;margin-top:4px">Bottom label</p>
  </div>

  <!-- Variant 3: slide extend -->
  <div style="display:flex;align-items:center;flex-direction:column;gap:8px">
    <div class="fb11-fab-wrap fb11-fab-wrap--slide" style="position:static">
      <button class="fb11-fab-compose fb11-fab-compose--slide" style="background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 22px rgba(16,185,129,.4),inset 0 1px 0 rgba(255,255,255,.2)" aria-label="Compose">
        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
      </button>
      <span class="fb11-fab-slide-lbl">Compose</span>
    </div>
    <p style="font-size:.72rem;color:#9ca3af;text-align:center">Slide extend ← hover</p>
  </div>

</div>
</div>
.fb11, .fb11 *, .fb11 *::before, .fb11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb11 {
    font-family: 'Inter', sans-serif;
    background: #f9fafb;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #111827;
  }

  h1 {
    font-size: clamp(1.6rem,5vw,2.4rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: -.02em;
    margin-bottom: 8px;
  }
  p.fb11-sub {
    text-align: center;
    color: #6b7280;
    font-size: .9rem;
    max-width: 44ch;
    margin: 0 auto 52px;
    line-height: 1.6;
  }

  /* ── email app mockup ── */
  .fb11-inbox {
    width: min(700px, 100%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,.07);
    position: relative;
    min-height: 500px;
  }

  .fb11-inbox-header {
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .fb11-inbox-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
  }
  .fb11-inbox-header span {
    font-size: .78rem;
    color: #9ca3af;
  }

  .fb11-mail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid #f9fafb;
    cursor: pointer;
    transition: background .12s;
  }
  .fb11-mail-item:hover { background: #f9fafb; }
  .fb11-mail-item.fb11-unread { background: #f0f9ff; border-left: 3px solid #3b82f6; padding-left: 21px; }
  .fb11-mail-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff;
  }
  .fb11-av--a { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
  .fb11-av--b { background: linear-gradient(135deg,#06b6d4,#0ea5e9); }
  .fb11-av--c { background: linear-gradient(135deg,#10b981,#059669); }
  .fb11-av--d { background: linear-gradient(135deg,#f59e0b,#d97706); }
  .fb11-av--e { background: linear-gradient(135deg,#f43f5e,#e11d48); }

  .fb11-mail-info { flex: 1; min-width: 0; }
  .fb11-mail-from { font-size: .86rem; font-weight: 600; color: #111827; }
  .fb11-mail-subject { font-size: .82rem; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fb11-mail-preview { font-size: .78rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fb11-mail-time { font-size: .72rem; color: #9ca3af; flex-shrink: 0; }
  .fb11-unread .fb11-mail-from, .fb11-unread .fb11-mail-subject { color: #1f2937; font-weight: 700; }

  /* ═══════════════════════════
     FAB COMPOSE BUTTON VARIANTS
  ═══════════════════════════ */

  /* ── 1: Tooltip on hover (left side) ── */
  .fb11-fab-wrap {
    position: absolute;
    bottom: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 0;
  }

  .fb11-fab-tooltip {
    background: #111827;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s ease, transform .2s ease;
    position: absolute;
    right: calc(100% + 12px);
    /* arrow */
  }
  .fb11-fab-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #111827;
  }

  .fb11-fab-compose {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 6px 22px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    position: relative;
    z-index: 2;
  }
  .fb11-fab-compose:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 32px rgba(59,130,246,.6), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .fb11-fab-compose:hover + .fb11-fab-tooltip,
  .fb11-fab-compose:focus + .fb11-fab-tooltip {
    opacity: 1;
    transform: none;
  }
  .fb11-fab-compose svg { width: 24px; height: 24px; fill: #fff; }

  /* ── 2: Bottom label that fades in ── */
  .fb11-fab-wrap--bottom {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  .fb11-fab-lbl-bottom {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: #6b7280;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
    order: 2;
  }
  .fb11-fab-compose--b { order: 1; }
  .fb11-fab-compose--b:hover ~ .fb11-fab-lbl-bottom,
  .fb11-fab-compose--b:focus ~ .fb11-fab-lbl-bottom { opacity: 1; transform: none; }

  /* ── 3: Slide-in extended label ── */
  .fb11-fab-wrap--slide {
    flex-direction: row-reverse;
    align-items: center;
    gap: 0;
  }
  .fb11-fab-slide-lbl {
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    background: #1d4ed8;
    border-radius: 30px 0 0 30px;
    padding: 0 20px 0 18px;
    height: 58px;
    display: flex;
    align-items: center;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .3s ease, opacity .25s ease, padding .3s ease;
    pointer-events: none;
  }
  .fb11-fab-compose--slide { border-radius: 50%; z-index: 2; flex-shrink: 0; }
  .fb11-fab-compose--slide:hover { border-radius: 0 30px 30px 0; }
  .fb11-fab-compose--slide:hover + .fb11-fab-slide-lbl,
  .fb11-fab-compose--slide:focus + .fb11-fab-slide-lbl {
    max-width: 140px;
    opacity: 1;
  }

  /* ── app corner badges ── */
  .fb11-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
  }

  @media (prefers-reduced-motion: reduce) {
    .fb11-fab-compose, .fb11-fab-tooltip, .fb11-fab-lbl-bottom, .fb11-fab-slide-lbl { transition: none; }
  }

More from 32 CSS Floating Action Button Designs

Pulse RingMorphing FABLabeled PillScroll to TopNeon CyberGlass FABBrutalist StampNotification BadgeDrag HandlePremium AuroraQuick ReplySquare Modern
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →