16 CSS Floating Action Button Designs
Morphing FAB
The circle morphs into a search input on hover — width and border-radius animate together, the icon sliding to the left edge. Premium micro-interaction.
Morphing FAB the 4th 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
<form class="cfb-morph" role="search">
<input type="search" placeholder="Search…" aria-label="Search" />
<span class="cfb-morph-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.5-3.5" />
</svg>
</span>
</form> .cfb-morph {
position: relative;
display: inline-block;
height: 52px;
}
.cfb-morph input {
width: 52px; height: 52px;
padding: 0 16px 0 48px;
border: 0; outline: none;
background: linear-gradient(135deg, #2eb88a, #06b6d4);
border-radius: 26px;
color: #fff;
font: 500 14px/52px system-ui, sans-serif;
box-shadow: 0 6px 16px rgba(46,184,138,0.35);
cursor: pointer;
transition: width 0.4s cubic-bezier(0.65,0,0.35,1), padding 0.4s, background 0.3s;
}
.cfb-morph input::placeholder { color: rgba(255,255,255,0.7); }
.cfb-morph:hover input,
.cfb-morph input:focus { width: 240px; cursor: text; }
.cfb-morph-icon {
position: absolute; top: 50%; left: 16px;
transform: translateY(-50%);
pointer-events: none;
}
.cfb-morph-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } More from 16 CSS Floating Action Button Designs
Glass FABBrutalist StampNotification BadgeDrag HandlePremium AuroraQuick ReplySquare ModernLoading SpinnerVoice ActionClassic PlusSpeed DialPulse Ring
View the full collection →