Copy Button

Copy button that morphs to a check and resets.

How to use it

Paste the HTML where the buttons should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More buttons

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →