16 CSS Floating Action Button Designs
Square Modern
Squircle (rounded square) FAB with subtle hover tilt — the 2025 design trend that breaks from the always-circular FAB. Apple-inspired.
Square Modern the 16th 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-square" aria-label="Compose">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
</svg>
</button> .cfb-square {
width: 56px; height: 56px;
border: 0; border-radius: 18px;
background: linear-gradient(135deg, #1f1f2e, #15151d);
color: #cbd5e1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, color 0.2s, border-color 0.2s;
}
.cfb-square:hover {
transform: rotate(-6deg) translateY(-3px);
color: #a78bfa;
border-color: rgba(167,139,250,0.4);
box-shadow: 0 12px 32px rgba(124,108,255,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cfb-square:active { transform: rotate(0) translateY(0); }
.cfb-square:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-square svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } More from 16 CSS Floating Action Button Designs
Classic PlusSpeed DialPulse RingMorphing FABLabeled PillScroll to TopNeon CyberGlass FABBrutalist StampNotification BadgeDrag HandlePremium Aurora
View the full collection →