16 CSS Floating Action Button Designs
Speed Dial
Hover or focus reveals 3 child actions arcing upward — the classic FAB speed-dial. Keyboard accessible because focus stays within the group via :focus-within.
Speed Dial the 2nd 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-dial" role="group" aria-label="Quick create">
<button type="button" class="cfb-dial-main" aria-label="Open quick actions" aria-expanded="false">
+
</button>
<button type="button" class="cfb-dial-c cfb-dial-c1" aria-label="New document">📄</button>
<button type="button" class="cfb-dial-c cfb-dial-c2" aria-label="New folder">📁</button>
<button type="button" class="cfb-dial-c cfb-dial-c3" aria-label="Upload file">⬆</button>
</div> .cfb-dial {
position: relative;
width: 56px; height: 56px;
}
.cfb-dial button {
position: absolute;
width: 48px; height: 48px;
border-radius: 50%; border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, opacity 0.25s;
}
.cfb-dial-main {
z-index: 2;
bottom: 0; left: 0;
background: linear-gradient(135deg, #ff6c8a, #ff9a76);
color: #fff;
font: 700 26px/1 system-ui, sans-serif;
box-shadow: 0 6px 18px rgba(255,108,138,0.4);
}
.cfb-dial:hover .cfb-dial-main,
.cfb-dial:focus-within .cfb-dial-main { transform: rotate(45deg); }
.cfb-dial-c {
z-index: 1;
bottom: 0; left: 0;
background: #1a1a28;
border: 1px solid rgba(255,255,255,0.1);
font-size: 16px;
opacity: 0;
pointer-events: none;
}
.cfb-dial:hover .cfb-dial-c,
.cfb-dial:focus-within .cfb-dial-c { opacity: 1; pointer-events: auto; }
.cfb-dial:hover .cfb-dial-c1,
.cfb-dial:focus-within .cfb-dial-c1 { transform: translateY(-60px); }
.cfb-dial:hover .cfb-dial-c2,
.cfb-dial:focus-within .cfb-dial-c2 { transform: translate(48px, -42px); }
.cfb-dial:hover .cfb-dial-c3,
.cfb-dial:focus-within .cfb-dial-c3 { transform: translateX(60px); }
.cfb-dial button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } More from 16 CSS Floating Action Button Designs
Brutalist StampNotification BadgeDrag HandlePremium AuroraQuick ReplySquare ModernLoading SpinnerVoice ActionClassic PlusPulse RingMorphing FABLabeled Pill
View the full collection →