16 CSS Floating Action Button Designs
Drag Handle
FAB with a 6-dot grip pattern signaling it\u2019s draggable. cursor: grab (and grabbing on :active) makes the affordance unmistakable.
Drag Handle the 12th 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
<button type="button" class="cfb-drag" aria-label="Drag to reposition">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="9" cy="6" r="1.5" />
<circle cx="15" cy="6" r="1.5" />
<circle cx="9" cy="12" r="1.5" />
<circle cx="15" cy="12" r="1.5" />
<circle cx="9" cy="18" r="1.5" />
<circle cx="15" cy="18" r="1.5" />
</svg>
</button> .cfb-drag {
width: 44px; height: 44px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
background: #1a1a28;
color: #b8b6d4;
cursor: grab;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.cfb-drag:hover {
background: rgba(124,108,255,0.1);
border-color: rgba(124,108,255,0.4);
color: #a78bfa;
}
.cfb-drag:active { cursor: grabbing; transform: scale(0.95); }
.cfb-drag:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-drag svg { width: 18px; height: 18px; fill: currentColor; } More from 16 CSS Floating Action Button Designs
Pulse RingMorphing FABLabeled PillScroll to TopNeon CyberGlass FABBrutalist StampNotification BadgePremium AuroraQuick ReplySquare ModernLoading Spinner
View the full collection →