Copy Action Swap
Primary button that swaps its icon and label with a sliding transition to confirm an action, then returns on its own.
Preview and code
index.html
<div class="as"><button class="bt" type="button"><span class="vw"><span class="st a"><i>❐</i>Copy link</span><span class="st b"><i>✓</i>Copied</span></span></button></div>
styles.css
.as{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.bt{border:0;border-radius:99px;background:#0a84ff;color:#fff;padding:0 18px;height:38px;font:600 13px system-ui;cursor:pointer;transition:width .4s cubic-bezier(.3,1.3,.5,1),transform .2s,background .3s;width:124px;overflow:hidden}.bt:active{transform:scale(.95)}.bt.ok{width:112px;background:#22a45d}.vw{position:relative;display:block;height:38px}.st{position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .4s cubic-bezier(.3,1.3,.5,1),opacity .25s,filter .3s;white-space:nowrap}.st i{font-style:normal}.st.b{transform:translateY(120%);opacity:0;filter:blur(3px)}.bt.ok .a{transform:translateY(-120%);opacity:0;filter:blur(3px)}.bt.ok .b{transform:none;opacity:1;filter:none}
script.js
(function(){var b=document.querySelector(".bt"),t=0;b.onclick=function(){b.classList.add("ok");clearTimeout(t);t=setTimeout(function(){b.classList.remove("ok")},1600)}})();