Copy Link Field

<div class="cl"><input id="clInput" value="https://convertatlas.org/snippets" readonly><button id="clBtn"><span>Copy</span></button></div>

body{background:#f6f7fa}
.cl{display:flex;width:340px;max-width:100%;border:1px solid #d8dce6;border-radius:12px;overflow:hidden;font-family:system-ui,sans-serif;background:#fff}
.cl input{flex:1;border:0;padding:13px 14px;font-size:14px;color:#46506b;outline:none}
.cl button{border:0;background:#1a1f36;color:#fff;padding:0 20px;font-weight:700;cursor:pointer;transition:background .2s}
.cl button.done{background:#16a34a}

var b=document.getElementById('clBtn'),inp=document.getElementById('clInput');
b.onclick=function(){navigator.clipboard.writeText(inp.value).then(function(){b.classList.add('done');b.querySelector('span').textContent='Copied!';setTimeout(function(){b.classList.remove('done');b.querySelector('span').textContent='Copy'},1500)})};