Slide-out Delete Button
A round icon button that stretches into a red pill and reveals its Delete label on hover or focus.
Preview and code
index.html
<button class="del" type="button" aria-label="Delete"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3"/></svg><span>Delete</span></button>
styles.css
.del{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:0;border-radius:999px;background:#161616;color:#fff;font:600 14px/1 system-ui,sans-serif;cursor:pointer;overflow:hidden;transition:width .3s ease,background-color .3s ease}
.del svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.del span{max-width:0;margin-left:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .3s ease,margin-left .3s ease,opacity .3s ease}
.del:hover,.del:focus-visible{width:132px;background:#ff4545}
.del:hover span,.del:focus-visible span{max-width:70px;margin-left:8px;opacity:1}
.del:focus-visible{outline:2px solid #ff4545;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.del,.del span{transition:none}}About
The icon sits alone until the pointer or keyboard focus arrives, then the button widens and the label slides in. Pair it with a confirm step in your own app before deleting anything for real.