32 CSS Floating Action Button Designs 03 / 32
Morph Expand FAB
Morphing FAB that expands into an extended pill button on hover, with 4 direction variants and smooth shape transitions.
The code
<div class="fb03">
<h1>Morphing Floating Action Button</h1>
<p class="fb03-sub">FAB expands to an extended pill on hover — pure CSS width/height transition, no JavaScript. Four morph directions and shapes.</p>
<div class="fb03-grid">
<div class="fb03-well">
<span class="fb03-well-tag">Horizontal expand</span>
<button class="fb03-morph-fab" aria-label="Compose new message">
<svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
<span class="fb03-m-label">Compose</span>
</button>
</div>
<div class="fb03-well">
<span class="fb03-well-tag">Green slide reveal</span>
<button class="fb03-morph-fab fb03-morph-fab--slide" aria-label="Add new item">
<svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
<span class="fb03-m-label">Add item</span>
</button>
</div>
<div class="fb03-well">
<span class="fb03-well-tag">Square → pill morph</span>
<button class="fb03-morph-fab fb03-morph-fab--sq" aria-label="Upload files">
<svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
<span class="fb03-m-label">Upload files</span>
</button>
</div>
<div class="fb03-well">
<span class="fb03-well-tag">Vertical expand</span>
<div class="fb03-corner-wrap">
<button class="fb03-morph-fab fb03-morph-fab--corner" aria-label="Quick actions">
<svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
<span class="fb03-m-label">Quick</span>
<span class="fb03-m-label">Share</span>
<span class="fb03-m-label">Save</span>
</button>
</div>
</div>
</div>
</div> <div class="fb03">
<h1>Morphing Floating Action Button</h1>
<p class="fb03-sub">FAB expands to an extended pill on hover — pure CSS width/height transition, no JavaScript. Four morph directions and shapes.</p>
<div class="fb03-grid">
<div class="fb03-well">
<span class="fb03-well-tag">Horizontal expand</span>
<button class="fb03-morph-fab" aria-label="Compose new message">
<svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
<span class="fb03-m-label">Compose</span>
</button>
</div>
<div class="fb03-well">
<span class="fb03-well-tag">Green slide reveal</span>
<button class="fb03-morph-fab fb03-morph-fab--slide" aria-label="Add new item">
<svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/></svg>
<span class="fb03-m-label">Add item</span>
</button>
</div>
<div class="fb03-well">
<span class="fb03-well-tag">Square → pill morph</span>
<button class="fb03-morph-fab fb03-morph-fab--sq" aria-label="Upload files">
<svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
<span class="fb03-m-label">Upload files</span>
</button>
</div>
<div class="fb03-well">
<span class="fb03-well-tag">Vertical expand</span>
<div class="fb03-corner-wrap">
<button class="fb03-morph-fab fb03-morph-fab--corner" aria-label="Quick actions">
<svg class="fb03-m-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
<span class="fb03-m-label">Quick</span>
<span class="fb03-m-label">Share</span>
<span class="fb03-m-label">Save</span>
</button>
</div>
</div>
</div>
</div>.fb03, .fb03 *, .fb03 *::before, .fb03 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb03 {
font-family: 'Inter', sans-serif;
background: #fafaf9;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 20px;
color: #1c1917;
}
h1 {
font-size: clamp(1.6rem, 5vw, 2.4rem);
font-weight: 700;
text-align: center;
letter-spacing: -.025em;
color: #1c1917;
margin-bottom: 8px;
}
p.fb03-sub {
text-align: center;
color: #78716c;
font-size: .9rem;
max-width: 42ch;
margin: 0 auto 52px;
line-height: 1.6;
}
.fb03-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
width: min(860px, 100%);
}
.fb03-well {
background: #fff;
border: 1px solid #e7e5e4;
border-radius: 20px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.fb03-well-tag {
position: absolute;
top: 14px;
left: 16px;
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #a8a29e;
}
/* ── MORPH FAB (pure CSS hover width expand) ── */
.fb03-morph-fab {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
height: 60px;
width: 60px;
border-radius: 30px;
border: none;
cursor: pointer;
overflow: hidden;
/* gradient */
background: linear-gradient(135deg, #0ea5e9, #6366f1);
box-shadow: 0 6px 20px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.2);
transition:
width .38s cubic-bezier(.4,0,.2,1),
border-radius .38s cubic-bezier(.4,0,.2,1),
box-shadow .22s ease,
gap .38s ease;
white-space: nowrap;
}
.fb03-morph-fab:hover {
width: 180px;
border-radius: 16px;
gap: 10px;
box-shadow: 0 8px 28px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb03-morph-fab .fb03-m-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
fill: #fff;
transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.fb03-morph-fab:hover .fb03-m-icon { transform: translateX(-2px); }
.fb03-morph-fab .fb03-m-label {
font-size: .9rem;
font-weight: 600;
color: #fff;
letter-spacing: .02em;
max-width: 0;
opacity: 0;
overflow: hidden;
transition: max-width .3s ease .05s, opacity .25s ease .08s;
}
.fb03-morph-fab:hover .fb03-m-label { max-width: 120px; opacity: 1; }
/* ── variant: pill that slides text in from right ── */
.fb03-morph-fab--slide {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 6px 20px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb03-morph-fab--slide:hover {
box-shadow: 0 8px 28px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
/* ── variant: square → pill morph ── */
.fb03-morph-fab--sq {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
box-shadow: 0 6px 20px rgba(239,68,68,.32), inset 0 1px 0 rgba(255,255,255,.2);
transition:
width .38s cubic-bezier(.4,0,.2,1),
height .38s cubic-bezier(.4,0,.2,1),
border-radius .38s cubic-bezier(.4,0,.2,1),
box-shadow .22s ease,
gap .38s ease;
}
.fb03-morph-fab--sq:hover {
width: 200px;
height: 52px;
border-radius: 26px;
gap: 10px;
box-shadow: 0 8px 28px rgba(239,68,68,.42), inset 0 1px 0 rgba(255,255,255,.2);
}
/* ── variant: bottom-right corner FAB that expands ── */
.fb03-corner-wrap {
position: absolute;
bottom: 20px;
right: 20px;
}
.fb03-morph-fab--corner {
background: linear-gradient(135deg, #8b5cf6, #d946ef);
box-shadow: 0 6px 20px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
flex-direction: column;
height: 60px;
width: 60px;
border-radius: 30px;
transition:
height .38s cubic-bezier(.4,0,.2,1),
border-radius .38s cubic-bezier(.4,0,.2,1),
box-shadow .22s ease,
gap .38s ease;
}
.fb03-morph-fab--corner:hover {
height: 160px;
border-radius: 20px;
gap: 8px;
box-shadow: 0 8px 28px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.2);
width: 60px;
}
.fb03-morph-fab--corner .fb03-m-label {
max-width: none;
max-height: 0;
opacity: 0;
font-size: .75rem;
overflow: hidden;
transition: max-height .3s ease .05s, opacity .25s ease .08s;
writing-mode: horizontal-tb;
white-space: nowrap;
}
.fb03-morph-fab--corner:hover .fb03-m-label { max-height: 60px; opacity: 1; }
.fb03-morph-fab--corner:hover .fb03-m-icon { transform: none; }
@media (prefers-reduced-motion: reduce) {
.fb03-morph-fab, .fb03-morph-fab .fb03-m-label, .fb03-morph-fab .fb03-m-icon { transition: none; }
} .fb03, .fb03 *, .fb03 *::before, .fb03 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fb03 {
font-family: 'Inter', sans-serif;
background: #fafaf9;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 20px;
color: #1c1917;
}
h1 {
font-size: clamp(1.6rem, 5vw, 2.4rem);
font-weight: 700;
text-align: center;
letter-spacing: -.025em;
color: #1c1917;
margin-bottom: 8px;
}
p.fb03-sub {
text-align: center;
color: #78716c;
font-size: .9rem;
max-width: 42ch;
margin: 0 auto 52px;
line-height: 1.6;
}
.fb03-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
width: min(860px, 100%);
}
.fb03-well {
background: #fff;
border: 1px solid #e7e5e4;
border-radius: 20px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.fb03-well-tag {
position: absolute;
top: 14px;
left: 16px;
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #a8a29e;
}
/* ── MORPH FAB (pure CSS hover width expand) ── */
.fb03-morph-fab {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
height: 60px;
width: 60px;
border-radius: 30px;
border: none;
cursor: pointer;
overflow: hidden;
/* gradient */
background: linear-gradient(135deg, #0ea5e9, #6366f1);
box-shadow: 0 6px 20px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.2);
transition:
width .38s cubic-bezier(.4,0,.2,1),
border-radius .38s cubic-bezier(.4,0,.2,1),
box-shadow .22s ease,
gap .38s ease;
white-space: nowrap;
}
.fb03-morph-fab:hover {
width: 180px;
border-radius: 16px;
gap: 10px;
box-shadow: 0 8px 28px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb03-morph-fab .fb03-m-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
fill: #fff;
transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.fb03-morph-fab:hover .fb03-m-icon { transform: translateX(-2px); }
.fb03-morph-fab .fb03-m-label {
font-size: .9rem;
font-weight: 600;
color: #fff;
letter-spacing: .02em;
max-width: 0;
opacity: 0;
overflow: hidden;
transition: max-width .3s ease .05s, opacity .25s ease .08s;
}
.fb03-morph-fab:hover .fb03-m-label { max-width: 120px; opacity: 1; }
/* ── variant: pill that slides text in from right ── */
.fb03-morph-fab--slide {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 6px 20px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.fb03-morph-fab--slide:hover {
box-shadow: 0 8px 28px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
/* ── variant: square → pill morph ── */
.fb03-morph-fab--sq {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
box-shadow: 0 6px 20px rgba(239,68,68,.32), inset 0 1px 0 rgba(255,255,255,.2);
transition:
width .38s cubic-bezier(.4,0,.2,1),
height .38s cubic-bezier(.4,0,.2,1),
border-radius .38s cubic-bezier(.4,0,.2,1),
box-shadow .22s ease,
gap .38s ease;
}
.fb03-morph-fab--sq:hover {
width: 200px;
height: 52px;
border-radius: 26px;
gap: 10px;
box-shadow: 0 8px 28px rgba(239,68,68,.42), inset 0 1px 0 rgba(255,255,255,.2);
}
/* ── variant: bottom-right corner FAB that expands ── */
.fb03-corner-wrap {
position: absolute;
bottom: 20px;
right: 20px;
}
.fb03-morph-fab--corner {
background: linear-gradient(135deg, #8b5cf6, #d946ef);
box-shadow: 0 6px 20px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
flex-direction: column;
height: 60px;
width: 60px;
border-radius: 30px;
transition:
height .38s cubic-bezier(.4,0,.2,1),
border-radius .38s cubic-bezier(.4,0,.2,1),
box-shadow .22s ease,
gap .38s ease;
}
.fb03-morph-fab--corner:hover {
height: 160px;
border-radius: 20px;
gap: 8px;
box-shadow: 0 8px 28px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.2);
width: 60px;
}
.fb03-morph-fab--corner .fb03-m-label {
max-width: none;
max-height: 0;
opacity: 0;
font-size: .75rem;
overflow: hidden;
transition: max-height .3s ease .05s, opacity .25s ease .08s;
writing-mode: horizontal-tb;
white-space: nowrap;
}
.fb03-morph-fab--corner:hover .fb03-m-label { max-height: 60px; opacity: 1; }
.fb03-morph-fab--corner:hover .fb03-m-icon { transform: none; }
@media (prefers-reduced-motion: reduce) {
.fb03-morph-fab, .fb03-morph-fab .fb03-m-label, .fb03-morph-fab .fb03-m-icon { transition: none; }
}