16 CSS Floating Action Button Designs
Quick Reply
Click expands into 4 emoji reactions — the messaging-app reaction picker pattern. Uses :focus-within for keyboard accessibility (focus a reaction without it disappearing).
Quick Reply the 15th of 16 designs in the 16 CSS Floating Action Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="cfb-reply">
<button
type="button"
class="cfb-reply-main"
aria-label="React with emoji"
aria-haspopup="true"
aria-expanded="false"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
<path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
</svg>
</button>
<div class="cfb-reply-pop" role="group" aria-label="Reactions">
<button type="button" aria-label="Like">👍</button>
<button type="button" aria-label="Love">❤️</button>
<button type="button" aria-label="Laugh">😂</button>
<button type="button" aria-label="Celebrate">🎉</button>
</div>
</div> .cfb-reply {
position: relative;
}
.cfb-reply-main {
width: 48px; height: 48px;
border: 0; border-radius: 50%;
background: linear-gradient(135deg, #f5a623, #ff6c8a);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(245,166,35,0.35);
transition: transform 0.2s;
}
.cfb-reply-main:hover { transform: scale(1.05); }
.cfb-reply-main:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-reply-main svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfb-reply-pop {
position: absolute;
bottom: calc(100% + 10px); left: 50%;
transform: translateX(-50%) scale(0.6);
display: flex; gap: 4px;
padding: 6px;
background: #1a1a28;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
opacity: 0; pointer-events: none;
transform-origin: center bottom;
transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.cfb-reply:hover .cfb-reply-pop,
.cfb-reply:focus-within .cfb-reply-pop {
opacity: 1; pointer-events: auto;
transform: translateX(-50%) scale(1);
}
.cfb-reply-pop button {
width: 36px; height: 36px;
border: 0; border-radius: 50%;
background: transparent;
font-size: 18px;
cursor: pointer;
transition: transform 0.15s, background 0.15s;
}
.cfb-reply-pop button:hover {
transform: scale(1.25);
background: rgba(255,255,255,0.08);
}
.cfb-reply-pop button:focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; } More from 16 CSS Floating Action Button Designs
Brutalist StampNotification BadgeDrag HandlePremium AuroraSquare ModernLoading SpinnerVoice ActionClassic PlusSpeed DialPulse RingMorphing FABLabeled Pill
View the full collection →