Elements

<div class="sh"><button class="sh__b" type="button"><span>Get started</span></button></div>

<style>
.sh{display:grid;place-items:center;width:340px;height:170px;border-radius:24px;background:radial-gradient(circle at 18% 28%,#2bb5a0,rgba(43,181,160,0) 55%),radial-gradient(circle at 85% 80%,#c8d44a,rgba(200,212,74,0) 55%),linear-gradient(120deg,#13887e,#5f9f2c 70%,#a9bd36)}
.sh__b{position:relative;overflow:hidden;padding:18px 42px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.1));-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);color:#17372a;font:500 17px/1 system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.2),0 8px 24px rgba(0,0,0,.18);transition:background .25s ease,transform .15s ease}
.sh__b::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-30%);transition:transform .5s ease}
.sh__b:hover{background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.04))}
.sh__b:hover::after{transform:translateX(30%)}
.sh__b:active{transform:scale(.98)}
.sh__b span{position:relative;z-index:1}
.sh__b:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sh__b,.sh__b::after{transition:none}}
</style>

<div class="sg" role="radiogroup" aria-label="View"><span class="sg__p"></span><button class="sg__b" type="button" role="radio" aria-checked="true">Day</button><button class="sg__b" type="button" role="radio" aria-checked="false">Week</button><button class="sg__b" type="button" role="radio" aria-checked="false">Month</button></div>

<style>
.sg{position:relative;display:inline-flex;padding:4px;border-radius:16px;background:#f0f0f1;border:1px solid #e4e4e7;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.sg__p{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16),0 4px 10px rgba(0,0,0,.06);transition:transform .28s cubic-bezier(.3,1.2,.5,1),width .28s ease}
.sg__b{position:relative;z-index:1;padding:12px 26px;border:0;border-radius:12px;background:none;color:#737373;font:500 15px/1 system-ui,sans-serif;cursor:pointer;transition:color .2s ease}
.sg__b[aria-checked=true]{color:#171717}
.sg__b:focus-visible{outline:2px solid #1659f5;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sg__p{transition:none}}
</style>

<script>
const g=document.querySelector('.sg'),p=g.querySelector('.sg__p'),bs=[...g.querySelectorAll('.sg__b')];
function set(i){bs.forEach((b,k)=>b.setAttribute('aria-checked',k===i));p.style.width=bs[i].offsetWidth+'px';p.style.transform='translateX('+bs[i].offsetLeft+'px)'}
bs.forEach((b,i)=>b.addEventListener('click',()=>set(i)));requestAnimationFrame(()=>set(0));
</script>

<div class="ri"><button class="ri__b" type="button">Secondary</button><button class="ri__b ri__b--dark" type="button">Confirm</button></div>

<style>
.ri{display:flex;gap:14px;align-items:center}
.ri__b{padding:15px 24px;border:1px solid #e2e2e4;border-radius:12px;background:#f1f1f2;color:#404040;font:700 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 2px 4px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.04);transition:box-shadow .15s ease}
.ri__b--dark{background:#262626;border-color:#111;color:#fff;box-shadow:inset 0 2px 3px rgba(255,255,255,.18),inset 0 -2px 4px rgba(0,0,0,.5),0 1px 1px rgba(0,0,0,.2)}
.ri__b:active{box-shadow:inset 0 3px 6px rgba(0,0,0,.18)}
.ri__b--dark:active{box-shadow:inset 0 3px 8px rgba(0,0,0,.7)}
.ri__b:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ri__b{transition:none}}
</style>

<div class="qs" data-min="1" data-max="9"><button class="qs__b" type="button" aria-label="Decrease"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12"/></svg></button><output class="qs__v" aria-live="polite">1</output><button class="qs__b" type="button" aria-label="Increase"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12M12 6v12"/></svg></button></div>

<style>
.qs{display:inline-flex;align-items:center;padding:5px;border-radius:16px;background:#ececee;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.qs__b{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:12px;background:#fff;color:#262626;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.08);transition:transform .12s ease,opacity .2s ease}
.qs__b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.qs__b:active{transform:scale(.94)}
.qs__b:disabled{opacity:.4;cursor:not-allowed;transform:none}
.qs__b:focus-visible{outline:2px solid #1659f5;outline-offset:2px}
.qs__v{min-width:52px;text-align:center;font:500 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#262626}
</style>

<script>
const w=document.querySelector('.qs'),v=w.querySelector('.qs__v'),[m,p]=w.querySelectorAll('.qs__b');const lo=+w.dataset.min,hi=+w.dataset.max;let n=lo;
function r(){v.textContent=n;m.disabled=n<=lo;p.disabled=n>=hi}
m.addEventListener('click',()=>{n=Math.max(lo,n-1);r()});p.addEventListener('click',()=>{n=Math.min(hi,n+1);r()});r();
</script>

<button class="pr" type="button"><span>Get started</span></button>

<style>
.pr{position:relative;padding:17px 34px;border:1px solid rgba(255,255,255,.16);border-left:1px solid #38bdf8;border-radius:14px;background:linear-gradient(135deg,#232326,#0b0b0c 65%);color:#fff;font:600 18px/1 system-ui,sans-serif;cursor:pointer;box-shadow:-8px 0 22px -6px rgba(14,140,255,.75),inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.6);transition:transform .15s ease,box-shadow .2s ease}
.pr::after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);pointer-events:none}
.pr span{position:relative;z-index:1}
.pr:hover{box-shadow:-10px 0 28px -4px rgba(14,160,255,.9),inset 0 1px 0 rgba(255,255,255,.2),0 14px 30px rgba(0,0,0,.6)}
.pr:active{transform:translateY(2px)}
.pr:focus-visible{outline:2px solid #38bdf8;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.pr{transition:none}}
</style>

<div class="su"><button class="su__b" type="button">Get started <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button><button class="su__b su__b--s" type="button">Cancel</button></div>

<style>
.su{display:flex;gap:18px;align-items:center;padding:18px;border-radius:28px;background:#f0f0f1;box-shadow:0 0 0 1px rgba(0,0,0,.03)}
.su__b{display:inline-flex;align-items:center;gap:8px;padding:17px 26px;border:0;border-radius:18px;background:#f0f0f1;color:#171717;font:600 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:8px 8px 18px rgba(0,0,0,.1),-8px -8px 18px #fff;transition:box-shadow .18s ease}
.su__b--s{padding:14px 20px;font-size:14px;border-radius:16px}
.su__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.su__b:active{box-shadow:inset 6px 6px 12px rgba(0,0,0,.12),inset -6px -6px 12px #fff}
.su__b:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.su__b{transition:none}}
</style>

<button class="ln" type="button"><span>View details</span></button>

<style>
.ln{position:relative;padding:17px 30px;border:1px solid #cfc5b2;border-radius:10px;background:repeating-linear-gradient(0deg,rgba(120,98,62,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,98,62,.07) 0 1px,transparent 1px 3px),linear-gradient(#efe9dc,#e2d9c6);color:#2b2418;font:600 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(60,45,20,.15),0 10px 20px rgba(60,45,20,.12);transition:transform .15s ease,box-shadow .15s ease}
.ln::before{content:"";position:absolute;inset:4px;border:1px dashed rgba(90,70,40,.38);border-radius:7px;pointer-events:none}
.ln::after{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%);pointer-events:none}
.ln span{position:relative;z-index:1}
.ln:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(60,45,20,.18)}
.ln:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ln{transition:none}}
</style>

<button class="lk" type="button" aria-pressed="false" aria-label="Like"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.4A4 4 0 0 1 19 10c0 5.600-7 10-7 10z"/></svg><span class="lk__n">128</span><i class="lk__p" style="--a:0deg"></i><i class="lk__p" style="--a:60deg"></i><i class="lk__p" style="--a:120deg"></i><i class="lk__p" style="--a:180deg"></i><i class="lk__p" style="--a:240deg"></i><i class="lk__p" style="--a:300deg"></i></button>

<style>
.lk{position:relative;display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;color:#404040;font:500 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 18px rgba(0,0,0,.07);transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.lk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill .2s ease}
.lk[aria-pressed=true]{background:#fff1f2;border-color:#fecdd3;color:#e11d48}
.lk[aria-pressed=true] svg{fill:#f43f5e;stroke:#f43f5e}
.lk.is-pop svg{animation:lk-pop .4s cubic-bezier(.3,1.6,.5,1)}
.lk__p{position:absolute;left:30px;top:50%;width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;background:#f43f5e;opacity:0;pointer-events:none}
.lk.is-pop .lk__p{animation:lk-burst .5s ease-out}
@keyframes lk-pop{0%{transform:scale(.6)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes lk-burst{0%{opacity:1;transform:rotate(var(--a)) translateX(4px)}100%{opacity:0;transform:rotate(var(--a)) translateX(22px)}}
.lk:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lk svg,.lk__p{animation:none!important}}
</style>

<script>
const b=document.querySelector('.lk'),n=b.querySelector('.lk__n');let c=128;
b.addEventListener('click',()=>{const on=b.getAttribute('aria-pressed')!=='true';b.setAttribute('aria-pressed',on);c+=on?1:-1;n.textContent=c;b.classList.remove('is-pop');if(on){void b.offsetWidth;b.classList.add('is-pop')}});
</script>

<button class="hd" type="button"><span class="hd__fill"></span><span class="hd__c"><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 class="hd__t">Hold to delete</span></span></button>

<style>
.hd{position:relative;overflow:hidden;padding:16px 30px;border:1px solid #e5e5e5;border-radius:14px;background:#fff;color:#e11d48;font:600 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 22px rgba(0,0,0,.08);user-select:none;touch-action:none}
.hd__fill{position:absolute;inset:0;width:100%;background:#e11d48;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.hd.is-hold .hd__fill{transform:scaleX(1);transition:transform 1.2s linear}
.hd__c{position:relative;display:inline-flex;align-items:center;gap:10px;transition:color .2s ease}
.hd.is-hold .hd__c,.hd.is-done .hd__c{color:#fff}
.hd.is-done .hd__fill{transform:scaleX(1)}
.hd svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hd:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hd__fill{transition:none!important}}
</style>

<script>
const b=document.querySelector('.hd'),t=b.querySelector('.hd__t');let id=null;
function start(){if(b.classList.contains('is-done'))return;b.classList.add('is-hold');id=setTimeout(()=>{b.classList.remove('is-hold');b.classList.add('is-done');t.textContent='Deleted';id=null;setTimeout(()=>{b.classList.remove('is-done');t.textContent='Hold to delete'},1600)},1200)}
function stop(){if(id){clearTimeout(id);id=null;b.classList.remove('is-hold')}}
b.addEventListener('pointerdown',start);['pointerup','pointerleave','pointercancel'].forEach(e=>b.addEventListener(e,stop));
b.addEventListener('keydown',e=>{if((e.key===' '||e.key==='Enter')&&!e.repeat)start()});b.addEventListener('keyup',stop);
</script>

<button class="fw" type="button" aria-pressed="false"><svg class="fw__add" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5S14.900 16.400 15.500 20M19 8v6M16 11h6"/></svg><svg class="fw__ok" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5S14.900 16.400 15.500 20M16 11l2 2 4-4"/></svg><span class="fw__t">Follow</span></button>

<style>
.fw{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:1px solid #171717;border-radius:999px;background:#171717;color:#fff;font:600 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.28);transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .12s ease}
.fw svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fw__ok{display:none}
.fw:active{transform:scale(.97)}
.fw[aria-pressed=true]{background:#fff;color:#525252;border-color:#e0e0e0;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.fw[aria-pressed=true] .fw__add{display:none}
.fw[aria-pressed=true] .fw__ok{display:block}
.fw:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fw{transition:none}}
</style>

<script>
const b=document.querySelector('.fw'),t=b.querySelector('.fw__t');
b.addEventListener('click',()=>{const on=b.getAttribute('aria-pressed')!=='true';b.setAttribute('aria-pressed',on);t.textContent=on?'Following':'Follow';});
</script>

<div class="fp"><button class="fp__b" type="button">Book now <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button><button class="fp__b fp__b--dark" type="button">Subscribe</button></div>

<style>
.fp{display:flex;gap:14px;align-items:center}
.fp__b{display:inline-flex;align-items:center;gap:8px;padding:16px 26px;border:0;border-radius:999px;background:#fff;color:#171717;font:500 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.06),0 10px 24px rgba(0,0,0,.1);transition:transform .15s ease,box-shadow .15s ease}
.fp__b--dark{background:#262626;color:#fff;font-weight:700;box-shadow:0 2px 4px rgba(0,0,0,.2),0 12px 26px rgba(0,0,0,.28)}
.fp__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fp__b:active{transform:translateY(2px);box-shadow:0 1px 2px rgba(0,0,0,.1),0 4px 10px rgba(0,0,0,.12)}
.fp__b:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fp__b{transition:none}}
</style>

<button class="dl" type="button"><span class="dl__i"><svg class="dl__a" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 11l5 5 5-5M5 20h14"/></svg><svg class="dl__s" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a9 9 0 1 0 9 9"/></svg><svg class="dl__c" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="dl__t" aria-live="polite">Download File</span></button>

<style>
.dl{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border:1px solid #e5e5e5;border-radius:14px;background:#fff;color:#262626;font:500 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 5px 0 #d4d4d4,0 14px 22px rgba(0,0,0,.1);transition:transform .15s ease,box-shadow .15s ease,background-color .25s ease,color .25s ease}
.dl__i{position:relative;width:18px;height:18px}
.dl svg{position:absolute;inset:0;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s ease}
.dl__a{opacity:1!important}
.dl.is-busy{transform:translateY(4px);box-shadow:0 1px 0 #d4d4d4,0 4px 10px rgba(0,0,0,.08);pointer-events:none}
.dl.is-busy .dl__a{opacity:0!important}
.dl.is-busy .dl__s{opacity:1;animation:dl-spin .7s linear infinite}
.dl.is-done{background:#10b981;border-color:#0e9f6e;color:#fff;box-shadow:0 5px 0 #047857,0 14px 22px rgba(16,185,129,.25);pointer-events:none}
.dl.is-done .dl__a{opacity:0!important}
.dl.is-done .dl__c{opacity:1}
@keyframes dl-spin{to{transform:rotate(360deg)}}
.dl:focus-visible{outline:2px solid #1659f5;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.dl{transition:none}.dl.is-busy .dl__s{animation:none}}
</style>

<script>
const b=document.querySelector('.dl'),t=b.querySelector('.dl__t');let busy=false;
b.addEventListener('click',()=>{if(busy)return;busy=true;b.classList.add('is-busy');t.textContent='Downloading...';
setTimeout(()=>{b.classList.remove('is-busy');b.classList.add('is-done');t.textContent='Done';},1400);
setTimeout(()=>{b.classList.remove('is-done');t.textContent='Download File';busy=false;},3200);});
</script>

<label class="dm"><input type="checkbox" role="switch" aria-label="Toggle"><span class="dm__track"><span class="dm__knob"></span></span></label>

<style>
.dm{position:relative;display:inline-block;width:76px;height:40px}
.dm input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dm__track{position:absolute;inset:0;border-radius:9px;background:#d9dadd;border:2px solid #9a9ca1;box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 1px 0 #fff;transition:background-color .3s ease}
.dm input:checked+.dm__track{background:#f5b50f}
.dm__knob{position:absolute;top:2px;left:2px;width:32px;height:32px;border-radius:8px;background:radial-gradient(circle,#b9bbc0 0 1px,transparent 1.5px) 0 0/6px 6px,linear-gradient(#f4f4f5,#d6d7da);box-shadow:inset 0 -2px 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.4);transition:transform .3s cubic-bezier(.3,1.2,.5,1)}
.dm input:checked+.dm__track .dm__knob{transform:translateX(34px)}
.dm input:focus-visible+.dm__track{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.dm__track,.dm__knob{transition:none}}
</style>

<div class="fo"><button class="fo__b fo__b--s" type="button">Learn more</button><button class="fo__b" type="button">Continue <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button></div>

<style>
.fo{display:flex;gap:16px;align-items:center}
.fo__b{display:inline-flex;align-items:center;gap:8px;padding:16px 26px;border:1px solid rgba(0,0,0,.05);border-radius:16px;background:#fff;color:#171717;font:600 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.06),0 6px 14px rgba(0,0,0,.08),0 18px 30px rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease}
.fo__b--s{padding:13px 20px;border-radius:14px;font-size:15px}
.fo__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fo__b:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.06)}
.fo__b:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fo__b{transition:none}}
</style>

<button class="cv" type="button" data-text="pnpm add your-package"><span class="cv__i"><svg class="cv__copy" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg><svg class="cv__ok" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="cv__t" aria-live="polite">Copy</span></button>

<style>
.cv{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:1px solid #e5e5e5;border-radius:12px;background:#fff;color:#262626;font:500 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 18px rgba(0,0,0,.07);transition:transform .12s ease}
.cv:active{transform:translateY(1px)}
.cv:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
.cv__i{position:relative;width:18px;height:18px}
.cv svg{position:absolute;inset:0;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.cv__ok{opacity:0;transform:scale(.4);stroke:#16a34a}
.cv.is-done .cv__copy{opacity:0;transform:scale(.4)}
.cv.is-done .cv__ok{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cv,.cv svg{transition:none}}
</style>

<script>
const b=document.querySelector('.cv'),t=b.querySelector('.cv__t');let id;
b.addEventListener('click',()=>{try{navigator.clipboard.writeText(b.dataset.text).catch(()=>{})}catch(e){}
b.classList.add('is-done');t.textContent='Copied';clearTimeout(id);id=setTimeout(()=>{b.classList.remove('is-done');t.textContent='Copy'},1600);});
</script>

<button class="latch" type="button"><span class="latch__t">Unlock</span></button>

<style>
.latch{position:relative;overflow:hidden;padding:18px 40px;border:1px solid #303030;border-radius:18px;background:linear-gradient(#3b3b3e,#1c1c1e);color:#f5f5f7;font:600 17px/1 system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 30px rgba(0,0,0,.65),0 16px 28px -10px rgba(255,110,40,.4);transition:transform .15s ease,box-shadow .15s ease}
.latch::before{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:55%;background:radial-gradient(60% 100% at 50% 100%,rgba(255,120,50,.6),rgba(255,120,50,0));pointer-events:none}
.latch::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,0));pointer-events:none}
.latch__t{position:relative;z-index:1}
.latch:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.6),0 10px 20px -10px rgba(255,110,40,.5)}
.latch:focus-visible{outline:2px solid #ff8a4c;outline-offset:4px}
</style>

<script>
const b=document.querySelector('.latch'),t=b.querySelector('.latch__t');let on=false;
b.addEventListener('click',()=>{on=!on;t.textContent=on?'Unlocked':'Unlock';});
</script>

<button class="bm" type="button" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 4h12v17l-6-4-6 4z"/></svg><span class="bm__t">Save</span></button>

<style>
.bm{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:1px solid #e5e5e5;border-radius:12px;background:#fff;color:#262626;font:500 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 18px rgba(0,0,0,.07);transition:background-color .2s ease,border-color .2s ease,transform .12s ease}
.bm svg{width:18px;height:18px;fill:none;stroke:#737373;stroke-width:2;stroke-linejoin:round;transition:fill .2s ease,stroke .2s ease}
.bm:active{transform:translateY(1px)}
.bm[aria-pressed=true]{background:#fffbeb;border-color:#fde7a8}
.bm[aria-pressed=true] svg{fill:#f59e0b;stroke:#f59e0b}
.bm:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
</style>

<script>
const b=document.querySelector('.bm'),t=b.querySelector('.bm__t');
b.addEventListener('click',()=>{const on=b.getAttribute('aria-pressed')!=='true';b.setAttribute('aria-pressed',on);t.textContent=on?'Saved':'Save';});
</script>

<button class="atc" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 4h2l2.2 10.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.5L20 8H6.2"/><circle cx="10" cy="20" r="1.2"/><circle cx="17" cy="20" r="1.2"/></svg><span class="atc__t" aria-live="polite">Add to cart</span></button>

<style>
.atc{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:0;border-radius:14px;background:#1c1c1e;color:#fff;font:600 16px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 0 #000,0 16px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .15s ease,box-shadow .15s ease,background-color .25s ease}
.atc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.atc.is-busy{transform:translateY(5px);box-shadow:0 1px 0 #000,0 6px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1);pointer-events:none}
.atc.is-done{background:#10b981;box-shadow:0 6px 0 #047857,0 16px 26px rgba(16,185,129,.28),inset 0 1px 0 rgba(255,255,255,.3);pointer-events:none}
.atc:focus-visible{outline:2px solid #1659f5;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.atc{transition:none}}
</style>

<script>
const b=document.querySelector('.atc'),t=b.querySelector('.atc__t');let busy=false;
b.addEventListener('click',()=>{if(busy)return;busy=true;b.classList.add('is-busy');t.textContent='Adding...';
setTimeout(()=>{b.classList.remove('is-busy');b.classList.add('is-done');t.textContent='Added';},1100);
setTimeout(()=>{b.classList.remove('is-done');t.textContent='Add to cart';busy=false;},2900);});
</script>