Copy Button

<!-- Copy Button · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="cpb-wrap"><button class="cpb" type="button"><svg class="cpb__copy" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg><svg class="cpb__check" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg><span class="cpb__txt">Kopieer code</span></button></div>
</div>

/* Copy Button · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.cpb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.cpb{position:relative;width:206px;height:58px;border:2px solid #0a0a0a;border-radius:13px;background:#fff;color:#0a0a0a;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;font:600 16px/1 'Switzer',sans-serif;transition:background .3s,color .3s,border-color .3s}
.cpb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,transform .25s}
.cpb__check{position:absolute;left:24px;opacity:0;transform:scale(.5)}.cpb__check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s}
.cpb.is-done{background:#F5480F;border-color:#F5480F;color:#fff}.cpb.is-done .cpb__copy{opacity:0;transform:scale(.5)}.cpb.is-done .cpb__check{opacity:1;transform:scale(1)}.cpb.is-done .cpb__check path{stroke-dashoffset:0}

// Copy Button · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var b=root.querySelector('.cpb');var t=b.querySelector('.cpb__txt');var busy=false;
b.addEventListener('click',function(){if(busy)return;busy=true;try{navigator.clipboard&&navigator.clipboard.writeText('npm i neddev-ui');}catch(e){}b.classList.add('is-done');t.textContent='Gekopieerd';setTimeout(function(){b.classList.remove('is-done');t.textContent='Kopieer code';busy=false;},1600);});
}
init(document.querySelector('.jouw-container'));