32 CSS Floating Action Button Designs 01 / 32

Material Gradient FAB

Material Design floating action button with gradient lift, ripple effect, 4 color variants, and 3 sizes including extended pill shape.

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

The code

<div class="fb01">
<div class="fb01-stage">
  <div class="fb01-label-block">
    <h1>Material Design<br>Floating Action Button</h1>
    <p>Gradient-lit FAB with specular gloss, deepening shadow lift on hover, and a CSS ripple on press. Three sizes, four color variants, one extended pill.</p>
  </div>

  <div class="fb01-demo-card">
    <!-- size row -->
    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--sm" aria-label="Add (small)">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <span>Mini</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab" aria-label="Add">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <span>Regular</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--lg" aria-label="Add (large)">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
      </button>
      <span>Large</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--extended" aria-label="Compose new">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24" style="width:20px;height:20px"><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>
        Compose
      </button>
      <span>Extended</span>
    </div>

    <!-- color row -->
    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--rose" aria-label="Heart">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A5.5 5.5 0 0112 5.09 5.5 5.5 0 0122 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
      </button>
      <span>Rose</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--emerald" aria-label="Check">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
      </button>
      <span>Emerald</span>
    </div>

    <div class="fb01-fab-wrap">
      <button class="fb01-fab fb01-fab--amber" aria-label="Star">
        <div class="fb01-ripple"></div>
        <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
      </button>
      <span>Amber</span>
    </div>
  </div>

  <dl class="fb01-spec">
    <div class="fb01-spec-item"><dt>Shadow lift</dt><dd>translateY −3px + 4× shadow depth</dd></div>
    <div class="fb01-spec-item"><dt>Gloss source</dt><dd>Radial gradient pseudo-element</dd></div>
    <div class="fb01-spec-item"><dt>Ripple</dt><dd>Pure CSS scale + opacity keyframe</dd></div>
    <div class="fb01-spec-item"><dt>Sizes</dt><dd>40 · 64 · 80px + extended pill</dd></div>
  </dl>
</div>
</div>
.fb01, .fb01 *, .fb01 *::before, .fb01 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb01 {
    font-family: 'Inter', sans-serif;
    background: #0f0f13;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    color: #e2e2e8;
  }

  .fb01-stage {
    width: min(680px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
  }

  .fb01-label-block {
    text-align: center;
  }
  .fb01-label-block h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, #a78bfa, #818cf8, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.05;
  }
  .fb01-label-block p {
    margin-top: 12px;
    font-size: .95rem;
    color: #71717a;
    max-width: 38ch;
    margin-inline: auto;
    line-height: 1.6;
  }

  /* ── Demo canvas ── */
  .fb01-demo-card {
    width: 100%;
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 24px;
    padding: 56px 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 48px;
    position: relative;
    overflow: hidden;
  }
  .fb01-demo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(129,140,248,.07), transparent);
    pointer-events: none;
  }

  /* ── THE FAB ── */
  .fb01-fab {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    outline: none;
    transition:
      transform .22s cubic-bezier(.34,1.56,.64,1),
      box-shadow .22s ease;
    /* gradient background */
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
    box-shadow:
      0 4px 16px rgba(129,140,248,.35),
      0 1px 4px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb01-fab:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow:
      0 12px 32px rgba(129,140,248,.55),
      0 4px 8px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
  .fb01-fab:active {
    transform: scale(.97) translateY(1px);
    box-shadow:
      0 2px 8px rgba(129,140,248,.3),
      0 1px 3px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.12);
  }
  .fb01-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.22), transparent 65%);
    pointer-events: none;
  }
  .fb01-fab svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    position: relative;
    z-index: 1;
  }

  /* ── size variants ── */
  .fb01-fab--sm { width: 40px; height: 40px; box-shadow: 0 2px 10px rgba(129,140,248,.3), 0 1px 3px rgba(0,0,0,.4); }
  .fb01-fab--sm svg { width: 18px; height: 18px; }
  .fb01-fab--lg { width: 80px; height: 80px; }
  .fb01-fab--lg svg { width: 34px; height: 34px; }
  .fb01-fab--extended {
    width: auto;
    height: 56px;
    border-radius: 28px;
    padding: 0 24px;
    gap: 10px;
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
  }
  .fb01-fab--extended::after { border-radius: 28px; }

  /* alternate color variants */
  .fb01-fab--rose {
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    box-shadow: 0 4px 16px rgba(244,63,94,.4), 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb01-fab--rose:hover { box-shadow: 0 12px 32px rgba(244,63,94,.55), 0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22); }

  .fb01-fab--emerald {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 4px 16px rgba(16,185,129,.4), 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb01-fab--emerald:hover { box-shadow: 0 12px 32px rgba(16,185,129,.55), 0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22); }

  .fb01-fab--amber {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 16px rgba(245,158,11,.4), 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fb01-fab--amber:hover { box-shadow: 0 12px 32px rgba(245,158,11,.55), 0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22); }

  /* label under each button */
  .fb01-fab-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .fb01-fab-wrap span {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #52525b;
    font-weight: 500;
  }

  /* ── ripple effect (CSS only) ── */
  .fb01-fab .fb01-ripple {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,.2);
    transform: scale(0);
    opacity: 0;
  }
  .fb01-fab:active .fb01-ripple {
    animation: fb01-ripple-burst .4s ease-out forwards;
  }
  @keyframes fb01-ripple-burst {
    to { transform: scale(2.2); opacity: 0; }
  }

  /* ── spec callout ── */
  .fb01-spec {
    width: 100%;
    background: #0f0f13;
    border: 1px solid #27272a;
    border-radius: 16px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }
  .fb01-spec-item { display: flex; flex-direction: column; gap: 4px; }
  .fb01-spec-item dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #52525b; }
  .fb01-spec-item dd { font-size: .88rem; font-weight: 500; color: #a1a1aa; }

  @media (prefers-reduced-motion: reduce) {
    .fb01-fab { transition: none; }
    .fb01-fab:active .fb01-ripple { animation: none; }
  }

More from 32 CSS Floating Action Button Designs

Speed Dial FAB MenuMorph Expand FABSquircle FABGlassmorphism FABNeon Glow FABCompose + Tooltip FABClassic PlusSpeed DialPulse RingMorphing FABLabeled PillScroll to Top
View the full collection →

Search CodeFronts

Loading…

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