Elements

<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>

<style>
.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}
</style>

<script>
(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)}})();
</script>

<div class="bw"><button class="sb" type="button">Continue <i>↗</i></button><button class="sb s" type="button"><i>✦</i> Generate</button><button class="sb r" type="button"><i>✦</i></button></div>

<style>
.bw{width:100%;height:100%;min-height:380px;display:flex;align-items:center;justify-content:center;gap:14px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.sb{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:11px 22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.35);color:#fff;font:600 13px system-ui;cursor:pointer;box-shadow:inset 0 0 12px rgba(255,255,255,.08),0 0 14px rgba(255,255,255,.06);transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,border-color .3s}.sb.s{padding:8px 14px;font-size:11px}.sb.r{width:34px;height:34px;padding:0;justify-content:center}.sb:before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s}.sb:hover{transform:scale(1.05);border-color:#fff;box-shadow:inset 0 0 16px rgba(255,255,255,.18),0 0 22px rgba(255,255,255,.18)}.sb:hover:before{left:130%}.sb:active{transform:scale(.96)}.sb i{font-style:normal;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.sb:hover i{transform:translate(2px,-2px) rotate(8deg)}
</style>

<div class="gb"><button class="g1">Continue <svg viewBox="0 0 24 24"><path d="M7 17L17 7M9 7h8v8"/></svg></button><button class="g2"><svg viewBox="0 0 24 24"><path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/><path d="M19 15v4M17 17h4"/></svg>Generate</button><button class="g3" aria-label="Generate"><svg viewBox="0 0 24 24"><path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/><path d="M19 15v4M17 17h4"/></svg></button></div>

<style>
.gb{display:flex;align-items:center;gap:14px;font-family:system-ui,-apple-system,sans-serif}.gb button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;color:#f5f5f5;font:600 14px/1 inherit;cursor:pointer;background:linear-gradient(#171717,#171717) padding-box,linear-gradient(var(--a,120deg),rgba(255,255,255,.95),rgba(255,255,255,.12) 30%,rgba(255,255,255,.7) 55%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.9)) border-box;transition:--a .6s,transform .25s,box-shadow .3s;box-shadow:0 6px 18px rgba(0,0,0,.4)}.g1{padding:15px 22px;border-radius:999px}.g2{padding:11px 16px;border-radius:999px;font-size:12.5px}.g3{width:38px;height:38px;border-radius:50%}.gb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}.gb button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 22px rgba(255,255,255,.08);animation:gb-spin 1.4s linear infinite}.g1:hover svg{transform:translate(2px,-2px)}.g2:hover svg,.g3:hover svg{transform:rotate(18deg) scale(1.15)}.gb button:active{transform:scale(.96)}@property --a{syntax:"<angle>";inherits:false;initial-value:120deg}@keyframes gb-spin{to{--a:480deg}}
</style>

<div class="xc"><button class="bell" aria-pressed="false"><svg viewBox="0 0 24 24"><path d="M6 17V11a6 6 0 0112 0v6l2 2H4z"/><path d="M10 21a2 2 0 004 0"/></svg><span>Notifications on</span></button><button class="chip" aria-pressed="false"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>React</span></button></div>

<style>
.xc{display:grid;justify-items:center;gap:18px;font-family:system-ui,-apple-system,sans-serif}.xc button{display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:999px;border:1px solid #2a2a2a;background:#181818;color:#e5e5e5;font:600 13px/1 inherit;cursor:pointer;padding:0 12px;transition:background .3s,color .3s,border-color .3s,transform .2s}.xc button:active{transform:scale(.96)}.xc svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.bell span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;margin-left:0;transition:max-width .45s cubic-bezier(.3,1.2,.4,1),margin .45s,opacity .3s}.bell:hover span,.bell[aria-pressed=true] span{max-width:140px;opacity:1;margin-left:8px}.bell[aria-pressed=true]{background:#0a84ff;border-color:#0a84ff;color:#fff}.chip{padding:0 16px}.chip svg{width:0;opacity:0;margin-right:0;transition:width .35s cubic-bezier(.3,1.3,.4,1),opacity .25s,margin .35s}.chip[aria-pressed=true]{background:#f3f3f3;color:#111;border-color:#f3f3f3}.chip[aria-pressed=true] svg{width:14px;opacity:1;margin-right:6px}
</style>

<script>
document.querySelectorAll('.xc button').forEach(function(b){b.onclick=function(){b.setAttribute('aria-pressed',b.getAttribute('aria-pressed')!=='true')}});
</script>

<a class="cta" href="#"><i class="fill"></i><svg class="ic" viewBox="0 0 24 24"><g class="dots"><circle cx="7" cy="5" r="1.4"/><circle cx="11" cy="9" r="1.4"/><circle cx="15" cy="12.5" r="1.4"/><circle cx="7" cy="19" r="1.4"/><circle cx="10.5" cy="15.5" r="1.4"/></g><path class="ar" d="M6 12h12M13 7l5 5-5 5"/></svg><span>Book a demo</span></a>

<style>
.cta{position:relative;display:inline-flex;align-items:center;padding:6px;border-radius:22px;background:#0b0b0b;color:#fff;font:600 17px/1 system-ui,-apple-system,sans-serif;text-decoration:none;overflow:hidden;cursor:pointer;transition:color .4s .05s}.fill{position:absolute;left:6px;top:6px;bottom:6px;width:54px;border-radius:16px;background:#c2f23d;transition:width .55s cubic-bezier(.3,.9,.25,1)}.ic{position:relative;z-index:1;width:54px;height:54px;padding:15px;box-sizing:border-box;fill:#0b0b0b;stroke:none}.ic .ar{fill:none;stroke:#0b0b0b;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .45s .15s}.ic .dots{transition:opacity .25s,transform .4s;transform-origin:center}.cta span{position:relative;z-index:1;padding:0 30px 0 20px;white-space:nowrap}.cta:hover{color:#0b0b0b}.cta:hover .fill{width:calc(100% - 12px)}.cta:hover .ar{stroke-dashoffset:0}.cta:hover .dots{opacity:0;transform:scale(.4)}
</style>

<div class="ik"><button class="ik__b ik__b--solid" type="button" aria-label="Add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button><button class="ik__b" type="button" aria-label="Settings"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.600 5.600 7 7M17 17l1.400 1.400M5.600 18.400 7 17M17 7l1.400-1.400"/></svg></button><button class="ik__b" type="button" aria-label="Messages"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 18l-1 3 4-2h8a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v6a3 3 0 0 0 1 3z"/></svg></button></div>

<style>
.ik{display:flex;gap:14px;align-items:center}
.ik__b{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:14px;background:#fff;color:#262626;cursor:pointer;box-shadow:0 5px 0 #d9d9dc,0 12px 20px rgba(0,0,0,.1),inset 0 1px 0 #fff;transition:transform .12s ease,box-shadow .12s ease}
.ik__b--solid{background:#262626;color:#fff;box-shadow:0 5px 0 #000,0 12px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.ik__b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ik__b:active{transform:translateY(4px);box-shadow:0 1px 0 #d9d9dc,0 4px 8px rgba(0,0,0,.1),inset 0 1px 0 #fff}
.ik__b--solid:active{box-shadow:0 1px 0 #000,0 4px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.ik__b:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ik__b{transition:none}}
</style>

<div class="tk"><button class="tk__b tk__b--solid" type="button">Continue <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button><button class="tk__b tk__b--soft" type="button">Cancel</button><button class="tk__b tk__b--muted" type="button">Learn more</button></div>

<style>
.tk{display:flex;gap:16px;align-items:center}
.tk__b{display:inline-flex;align-items:center;gap:8px;padding:15px 24px;border:0;border-radius:14px;font:700 16px/1 system-ui,sans-serif;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.tk__b--solid{background:#262626;color:#fff;box-shadow:0 5px 0 #000,0 12px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.tk__b--soft{background:#fff;color:#171717;box-shadow:0 5px 0 #d9d9dc,0 12px 20px rgba(0,0,0,.1),inset 0 1px 0 #fff}
.tk__b--muted{padding:12px 18px;border-radius:12px;background:#ececee;color:#404040;font-size:14px;box-shadow:0 4px 0 #cfcfd3,0 10px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.tk__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk__b:active{transform:translateY(4px)}
.tk__b--solid:active{box-shadow:0 1px 0 #000,0 4px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.tk__b--soft:active{box-shadow:0 1px 0 #d9d9dc,0 4px 8px rgba(0,0,0,.1),inset 0 1px 0 #fff}
.tk__b--muted:active{box-shadow:0 0 0 #cfcfd3,0 3px 6px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.tk__b:focus-visible{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tk__b{transition:none}}
</style>

<div class="sc"><span class="sc__l">Slide to confirm</span><button class="sc__k" type="button" aria-label="Slide to confirm"><svg class="sc__a" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg><svg class="sc__c" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></button></div>

<style>
.sc{position:relative;width:270px;height:54px;border-radius:999px;background:#f1f1f2;border:1px solid #e4e4e7;box-shadow:inset 0 2px 4px rgba(0,0,0,.06);transition:background-color .3s ease,border-color .3s ease;overflow:hidden}
.sc__l{position:absolute;inset:0;display:grid;place-items:center;padding-left:40px;color:#737373;font:500 15px/1 system-ui,sans-serif;pointer-events:none;transition:color .3s ease}
.sc__k{position:absolute;left:4px;top:4px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#262626;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:grab;touch-action:none;transition:transform .28s cubic-bezier(.3,1.2,.5,1)}
.sc.is-drag .sc__k{transition:none;cursor:grabbing}
.sc svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc__c{display:none}
.sc.is-done{background:#10b981;border-color:#0e9f6e}
.sc.is-done .sc__l{color:#fff;padding-left:0}
.sc.is-done .sc__a{display:none}
.sc.is-done .sc__c{display:block;color:#059669}
.sc__k:focus-visible{outline:2px solid #1659f5;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sc__k{transition:none}}
</style>

<script>
const t=document.querySelector('.sc'),k=t.querySelector('.sc__k'),l=t.querySelector('.sc__l');let x=0,drag=false,sx=0,done=false;
const max=()=>t.clientWidth-k.offsetWidth-10;
function fin(){done=true;x=max();k.style.transform='translateX('+x+'px)';t.classList.add('is-done');l.textContent='Confirmed';l.style.opacity=1;setTimeout(()=>{done=false;x=0;k.style.transform='';t.classList.remove('is-done');l.textContent='Slide to confirm'},2200)}
k.addEventListener('pointerdown',e=>{if(done)return;drag=true;sx=e.clientX-x;k.setPointerCapture(e.pointerId);t.classList.add('is-drag')});
k.addEventListener('pointermove',e=>{if(!drag)return;x=Math.max(0,Math.min(max(),e.clientX-sx));k.style.transform='translateX('+x+'px)';l.style.opacity=1-x/max()});
function end(){if(!drag)return;drag=false;t.classList.remove('is-drag');if(x>=max()*.92)fin();else{x=0;k.style.transform='';l.style.opacity=1}}
['pointerup','pointercancel'].forEach(e=>k.addEventListener(e,end));
k.addEventListener('keydown',e=>{if(e.key==='Enter'&&!done)fin()});
</script>

<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>