32 CSS Floating Action Button Designs 14 / 32

Floating Cart Badge

Floating cart button with live badge counter, add-to-cart product grid, animated badge bump, and collapsible cart mini panel.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="fb14">
<h1>🛒 Floating Cart Button</h1>
<p class="fb14-subtitle">Add items — watch the live badge counter update</p>

<!-- Badge style variants (static demo) -->
<div class="fb14-demo-row">
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-indigo">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-static fb14-badge-red">3</span>
    </div>
    <div class="fb14-demo-label">Red badge</div>
  </div>
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-emerald">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-static fb14-badge-green">12</span>
    </div>
    <div class="fb14-demo-label">Green badge</div>
  </div>
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-rose">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-static fb14-badge-pulse">5</span>
    </div>
    <div class="fb14-demo-label">Pulse ring</div>
  </div>
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-amber">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-dot"></span>
    </div>
    <div class="fb14-demo-label">Dot only</div>
  </div>
  <div class="fb14-demo-col">
    <div class="fb14-fab-static fb14-fab-indigo" style="border-radius:50%">
      <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      <span class="fb14-badge-static fb14-badge-red">99+</span>
    </div>
    <div class="fb14-demo-label">Round + overflow</div>
  </div>
</div>

<!-- Product grid -->
<div class="fb14-product-grid" id="fb14-productGrid"></div>

<!-- Interactive FAB -->
<div class="fb14-fab-cart-wrap" id="fb14-fabWrap">
  <div class="fb14-cart-panel" id="fb14-cartPanel">
    <div class="fb14-cart-panel-header">
      Your Cart
      <button class="fb14-clear-btn" id="fb14-clearBtn">Clear all</button>
    </div>
    <div class="fb14-cart-items-list" id="fb14-cartItemsList">
      <div class="fb14-cart-empty">Your cart is empty</div>
    </div>
    <div class="fb14-cart-panel-footer">
      <div class="fb14-cart-total" id="fb14-cartTotal">Total: $0.00</div>
      <button class="fb14-checkout-btn">Checkout →</button>
    </div>
  </div>
  <button class="fb14-fab-cart" id="fb14-fabCart" aria-label="Open cart">
    <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
  </button>
  <div class="fb14-cart-badge" id="fb14-cartBadge">0</div>
</div>
</div>
.fb14, .fb14 *, .fb14 *::before, .fb14 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb14 {
  font-family: 'DM Sans', sans-serif;
  background: #f0f4f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 120px;
  gap: 32px;
}

h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a202c;
  text-align: center;
  margin-bottom: 4px;
}
p.fb14-subtitle {
  color: #718096;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 16px;
}

/* ── Product Grid ── */
.fb14-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 800px;
}

.fb14-product-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.fb14-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.fb14-product-icon {
  font-size: 2.6rem;
  line-height: 1;
}
.fb14-product-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #2d3748;
  text-align: center;
}
.fb14-product-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: #4f46e5;
}
.fb14-add-btn {
  margin-top: 4px;
  padding: 7px 18px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.fb14-add-btn:hover { background: #4338ca; }
.fb14-add-btn:active { transform: scale(.95); }

/* ── Cart FAB ── */
.fb14-fab-cart-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 100;
}

/* The FAB itself */
.fb14-fab-cart {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #4f46e5;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(79,70,229,.45);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  outline: none;
}
.fb14-fab-cart:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(79,70,229,.55);
}
.fb14-fab-cart:active { transform: scale(.95); }

.fb14-fab-cart svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Badge */
.fb14-cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2.5px solid #f0f4f8;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fb14-cart-badge.fb14-visible {
  transform: scale(1);
}
.fb14-cart-badge.fb14-bump {
  animation: fb14-badge-bump .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fb14-badge-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Ripple burst on add */
.fb14-fab-cart-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: rgba(79,70,229,.3);
  transform: scale(1);
  opacity: 0;
  pointer-events: none;
}
.fb14-fab-cart-wrap.fb14-ripple::after {
  animation: fb14-cart-ripple .5s ease-out forwards;
}
@keyframes fb14-cart-ripple {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Mini panel */
.fb14-cart-panel {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 260px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(.85) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.34,1.4,.64,1), opacity .2s;
}
.fb14-cart-panel.fb14-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.fb14-cart-panel-header {
  padding: 14px 16px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a202c;
  border-bottom: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fb14-cart-panel-header span { color: #718096; font-weight: 400; }
.fb14-cart-items-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
}
.fb14-cart-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 0.8rem;
  color: #2d3748;
  animation: fb14-item-slide .25s ease-out;
}
@keyframes fb14-item-slide {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.fb14-cart-item-emoji { font-size: 1.2rem; }
.fb14-cart-item-name  { flex: 1; font-weight: 500; }
.fb14-cart-item-qty   {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.73rem;
}
.fb14-cart-item-price { color: #718096; min-width: 42px; text-align: right; }
.fb14-cart-empty {
  padding: 24px;
  text-align: center;
  color: #a0aec0;
  font-size: 0.82rem;
}
.fb14-cart-panel-footer {
  padding: 12px 16px;
  border-top: 1px solid #e8edf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fb14-cart-total { font-size: 0.85rem; font-weight: 700; color: #1a202c; }
.fb14-checkout-btn {
  padding: 8px 16px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.fb14-checkout-btn:hover { background: #4338ca; }
.fb14-clear-btn {
  background: none;
  border: none;
  color: #e53e3e;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}
.fb14-clear-btn:hover { color: #c53030; }

/* ── Item count variants demo row ── */
.fb14-demo-row {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  width: 100%;
  max-width: 800px;
}
.fb14-demo-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fb14-demo-label { font-size: 0.72rem; color: #718096; font-weight: 500; }

.fb14-fab-static {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb14-fab-static svg {
  width: 24px; height: 24px;
  stroke: #fff; fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fb14-fab-indigo  { background: #4f46e5; box-shadow: 0 4px 14px rgba(79,70,229,.4); }
.fb14-fab-emerald { background: #10b981; box-shadow: 0 4px 14px rgba(16,185,129,.4); }
.fb14-fab-rose    { background: #f43f5e; box-shadow: 0 4px 14px rgba(244,63,94,.4); }
.fb14-fab-amber   { background: #f59e0b; box-shadow: 0 4px 14px rgba(245,158,11,.4); }

.fb14-badge-static {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 20px; height: 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
}
.fb14-badge-red    { background: #ef4444; }
.fb14-badge-green  { background: #22c55e; }
.fb14-badge-pulse  { background: #ef4444; }
.fb14-badge-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid #ef4444;
  animation: fb14-badge-pulse-ring 1.4s ease-out infinite;
}
@keyframes fb14-badge-pulse-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}
.fb14-badge-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
}

@media (prefers-reduced-motion: reduce) {
  .fb14-cart-badge, .fb14-fab-cart, .fb14-cart-panel, .fb14-add-btn { transition: none; animation: none; }
  .fb14-fab-cart-wrap::after { animation: none !important; }
  .fb14-badge-pulse::before { animation: none; }
}
const products = [
  { name: 'Headphones', emoji: '🎧', price: 79.99 },
  { name: 'Sneakers',   emoji: '👟', price: 129.00 },
  { name: 'Backpack',   emoji: '🎒', price: 54.50 },
  { name: 'Watch',      emoji: '⌚', price: 199.00 },
  { name: 'Sunglasses', emoji: '🕶️',  price: 44.00 },
  { name: 'Camera',     emoji: '📷', price: 349.99 },
  { name: 'Jacket',     emoji: '🧥', price: 89.00 },
  { name: 'Notebook',   emoji: '📓', price: 12.99 },
];

const cart = {};

const grid      = document.getElementById('fb14-productGrid');
const badge     = document.getElementById('fb14-cartBadge');
const fabWrap   = document.getElementById('fb14-fabWrap');
const fabCart   = document.getElementById('fb14-fabCart');
const panel     = document.getElementById('fb14-cartPanel');
const itemsList = document.getElementById('fb14-cartItemsList');
const totalEl   = document.getElementById('fb14-cartTotal');
const clearBtn  = document.getElementById('fb14-clearBtn');

// Build product cards
products.forEach((p, i) => {
  const card = document.createElement('div');
  card.className = 'fb14-product-card';
  card.innerHTML = `
    <div class="fb14-product-icon">${p.emoji}</div>
    <div class="fb14-product-name">${p.name}</div>
    <div class="fb14-product-price">$${p.price.toFixed(2)}</div>
    <button class="fb14-add-btn" data-idx="${i}">Add to Cart</button>
  `;
  grid.appendChild(card);
});

grid.addEventListener('click', e => {
  if (!e.target.matches('.fb14-add-btn')) return;
  const p = products[+e.target.dataset.idx];
  const key = p.name;
  cart[key] = cart[key] ? { ...cart[key], qty: cart[key].qty + 1 } : { ...p, qty: 1 };
  updateBadge();
  renderCartPanel();
  triggerRipple();
});

function updateBadge() {
  const total = Object.values(cart).reduce((s, v) => s + v.qty, 0);
  badge.textContent = total > 99 ? '99+' : total;
  if (total > 0) {
    badge.classList.add('fb14-visible');
    badge.classList.remove('fb14-bump');
    requestAnimationFrame(() => badge.classList.add('fb14-bump'));
  } else {
    badge.classList.remove('fb14-visible');
  }
}

function renderCartPanel() {
  const items = Object.values(cart);
  if (!items.length) {
    itemsList.innerHTML = '<div class="fb14-cart-empty">Your cart is empty</div>';
    totalEl.textContent = 'Total: $0.00';
    return;
  }
  itemsList.innerHTML = items.map(it => `
    <div class="fb14-cart-item-row">
      <span class="fb14-cart-item-emoji">${it.emoji}</span>
      <span class="fb14-cart-item-name">${it.name}</span>
      <span class="fb14-cart-item-qty">×${it.qty}</span>
      <span class="fb14-cart-item-price">$${(it.price * it.qty).toFixed(2)}</span>
    </div>
  `).join('');
  const total = items.reduce((s, it) => s + it.price * it.qty, 0);
  totalEl.textContent = `Total: $${total.toFixed(2)}`;
}

function triggerRipple() {
  fabWrap.classList.remove('fb14-ripple');
  requestAnimationFrame(() => fabWrap.classList.add('fb14-ripple'));
}

fabCart.addEventListener('click', () => {
  panel.classList.toggle('fb14-open');
});

clearBtn.addEventListener('click', () => {
  Object.keys(cart).forEach(k => delete cart[k]);
  updateBadge();
  renderCartPanel();
});

document.addEventListener('click', e => {
  if (!fabWrap.contains(e.target)) panel.classList.remove('fb14-open');
});

More from 32 CSS Floating Action Button Designs

Quick ReplySquare ModernScroll-to-Top Progress RingFloating Chat WidgetFan Arc FAB MenuSocial Share FABDraggable FABNotification Bell FABMagnetic Hover FABTheme Toggle FABLoading SpinnerVoice Action
View the full collection →

Search CodeFronts

Loading…

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