Elements

<fieldset class='rg'><legend>Payment method</legend><label class='rg-o'><input type='radio' name='pay' value='cc'><span class='rg-d'></span><span class='rg-t'><b>Credit card</b><small>Visa, Mastercard, Amex</small></span></label><label class='rg-o'><input type='radio' name='pay' value='pp'><span class='rg-d'></span><span class='rg-t'><b>PayPal</b><small>Pay with your PayPal balance</small></span></label><label class='rg-o'><input type='radio' name='pay' value='bt'><span class='rg-d'></span><span class='rg-t'><b>Bank transfer</b><small>2–3 business days to clear</small></span></label></fieldset>

<style>
.rg{width:min(330px,88%);margin:auto;padding:0;border:0;font-family:Inter,Arial,sans-serif;color:#111}.rg legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:500}.rg-o{display:flex;gap:12px;align-items:center;margin-bottom:8px;padding:13px 14px;background:#fff;border:1px solid #e5e5e5;border-radius:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.rg-o:hover{border-color:#cfcfcf}.rg-o input{position:absolute;opacity:0;pointer-events:none}.rg-d{flex:none;width:16px;height:16px;border:1.5px solid #cfcfcf;border-radius:50%;display:grid;place-items:center;transition:border-color .15s}.rg-d:after{content:'';width:8px;height:8px;border-radius:50%;background:#111;transform:scale(0);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}.rg-o:has(input:checked){border-color:#111;box-shadow:0 0 0 1px #111}.rg-o input:checked+.rg-d{border-color:#111}.rg-o input:checked+.rg-d:after{transform:scale(1)}.rg-o input:focus-visible+.rg-d{box-shadow:0 0 0 3px rgba(17,17,17,.15)}.rg-t b{display:block;font-size:14px;font-weight:500}.rg-t small{display:block;margin-top:2px;font-size:12.5px;color:#737373}
</style>

<div class='ph'><label for='ph1'>Phone number</label><div class='ph-g'><span>+1</span><input id='ph1' type='tel' inputmode='numeric' placeholder='(555) 000-0000'></div><p>We will send a verification code by SMS.</p></div>

<style>
.ph{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ph label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.ph-g{display:flex;height:40px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.ph-g:focus-within{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.ph-g span{display:grid;place-items:center;padding:0 13px;background:#fafafa;border-right:1px solid #e5e5e5;font-size:14px;color:#404040}.ph-g input{flex:1;min-width:0;border:0;outline:0;padding:0 14px;font:inherit;font-size:14px;background:transparent}.ph-g input::placeholder{color:#a3a3a3}.ph p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<script>
const i=document.getElementById('ph1');i.addEventListener('input',()=>{const d=i.value.replace(/D/g,'').slice(0,10);let o='';if(d.length>0)o='('+d.slice(0,3);if(d.length>=3)o+=') ';if(d.length>3)o+=d.slice(3,6);if(d.length>6)o+='-'+d.slice(6);i.value=o});
</script>

<div class='ig'><label for='ig1'>Website</label><div class='ig-g'><span>https://</span><input id='ig1' type='text' placeholder='yourdomain.com'></div><p>Include the path after your domain.</p></div>

<style>
.ig{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ig label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.ig-g{display:flex;height:40px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.ig-g:focus-within{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.ig-g span{display:grid;place-items:center;padding:0 12px;background:#fafafa;border-right:1px solid #e5e5e5;font:13.5px ui-monospace,Menlo,monospace;color:#404040}.ig-g input{flex:1;min-width:0;border:0;outline:0;padding:0 12px;font:inherit;font-size:14px;background:transparent}.ig-g input::placeholder{color:#a3a3a3}.ig p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<div class='fl'><input id='fl1' type='email' placeholder=' '><label for='fl1'>Email address</label><p>We never share your email.</p></div>

<style>
.fl{position:relative;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.fl input{width:100%;box-sizing:border-box;height:46px;padding:16px 14px 0;font:inherit;font-size:14.5px;background:#fff;border:1px solid #e5e5e5;border-radius:12px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.fl label{position:absolute;left:15px;top:13px;font-size:14.5px;color:#737373;pointer-events:none;transform-origin:left top;transition:transform .18s ease,color .18s}.fl input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.fl input:focus+label,.fl input:not(:placeholder-shown)+label{transform:translateY(-8px) scale(.78);color:#111}.fl p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<div class='up'><div class='up-z' id='upz'><i class='c1'></i><i class='c2'></i><i class='c3'></i><i class='c4'></i><span class='up-i'><svg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='17' height='17' rx='3'/><path d='M3.5 16l5-5 4 4 3-3 5 5'/><path d='M16 6.5h4M18 4.5v4'/></svg></span><b>Drop your file here</b><small>Drag & drop or click anywhere</small></div><div class='up-r'><div><span id='upn'>No file selected</span><small>PDF, PNG, JPG, JPEG · max 5.0 MB</small></div><button type='button' id='upb'>Choose file</button></div><input type='file' id='upf' hidden accept='.pdf,.png,.jpg,.jpeg'></div>

<style>
.up{width:min(380px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.up-z{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:30px 10px;border:1px solid #e5e5e5;border-radius:16px;background:#fafafa linear-gradient(#ececec,#ececec) 33.3% 0/1px 100% no-repeat,linear-gradient(#ececec,#ececec) 66.6% 0/1px 100% no-repeat;cursor:pointer;transition:border-color .15s,background-color .15s}.up-z.over{border-color:#111;background-color:#f0f0f0}.up-z i{position:absolute;width:12px;height:12px;border:2px solid #cfcfcf}.up-z .c1{left:8px;top:8px;border-right:0;border-bottom:0;border-top-left-radius:3px}.up-z .c2{right:8px;top:8px;border-left:0;border-bottom:0;border-top-right-radius:3px}.up-z .c3{left:8px;bottom:8px;border-right:0;border-top:0;border-bottom-left-radius:3px}.up-z .c4{right:8px;bottom:8px;border-left:0;border-top:0;border-bottom-right-radius:3px}.up-i{display:grid;place-items:center;width:38px;height:38px;margin-bottom:8px;border-radius:11px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);color:#333}.up-z b{font-family:Georgia,serif;font-weight:400;font-size:17px}.up-z small{font-size:13px;color:#737373}.up-r{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.up-r span{display:block;font-size:13px;font-weight:500;color:#737373}.up-r small{display:block;margin-top:3px;font-size:11.5px;color:#737373}.up-r span.ok{color:#111}.up-r button{height:36px;padding:0 18px;border:0;border-radius:10px;background:#111;color:#fff;font:600 13.5px Inter,Arial,sans-serif;cursor:pointer;transition:transform .12s}.up-r button:active{transform:scale(.96)}
</style>

<script>
const z=document.getElementById('upz'),f=document.getElementById('upf'),n=document.getElementById('upn');const pick=()=>f.click();z.addEventListener('click',pick);document.getElementById('upb').addEventListener('click',pick);const show=x=>{if(!x)return;n.textContent=x.name+' ('+(x.size/1048576<.1?Math.max(1,Math.round(x.size/1024))+' KB':(x.size/1048576).toFixed(1)+' MB')+')';n.className='ok'};f.addEventListener('change',()=>show(f.files[0]));['dragenter','dragover'].forEach(e=>z.addEventListener(e,ev=>{ev.preventDefault();z.classList.add('over')}));['dragleave','drop'].forEach(e=>z.addEventListener(e,ev=>{ev.preventDefault();z.classList.remove('over')}));z.addEventListener('drop',ev=>show(ev.dataTransfer.files[0]));
</script>

<div class='df'><label for='df1'>Date of birth</label><div class='df-w'><input id='df1' type='text' readonly placeholder='Select a date'><input id='df2' type='date' tabindex='-1' aria-hidden='true'><button type='button' id='dfb' aria-label='Open calendar'><svg width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg></button></div><p>Must match your ID document.</p></div>

<style>
.df{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.df label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.df-w{position:relative}.df-w #df1{width:100%;box-sizing:border-box;height:40px;padding:0 42px 0 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.df-w #df1::placeholder{color:#a3a3a3}.df-w #df1:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}#df2{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;pointer-events:none}.df button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#737373;border-radius:8px;cursor:pointer}.df button:hover{color:#111;background:#f4f4f4}.df p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<script>
const t=document.getElementById('df1'),d=document.getElementById('df2'),b=document.getElementById('dfb');const go=()=>{try{d.showPicker()}catch(e){d.focus();d.click()}};t.addEventListener('click',go);b.addEventListener('click',go);d.addEventListener('change',()=>{if(d.value){const x=new Date(d.value+'T00:00:00');t.value=x.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'})}});
</script>

<div class='cx'><label for='cx1'>Framework</label><div class='cx-w'><input id='cx1' type='text' placeholder='Search frameworks...' autocomplete='off' role='combobox' aria-expanded='false'><svg class='cx-c' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg><ul id='cxl' role='listbox'></ul></div><p>Type to filter the list.</p></div>

<style>
.cx{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.cx label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.cx-w{position:relative}.cx input{width:100%;box-sizing:border-box;height:40px;padding:0 38px 0 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.cx input::placeholder{color:#a3a3a3}.cx input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.cx-c{position:absolute;right:12px;top:12px;color:#737373;pointer-events:none;transition:transform .2s}.cx.open .cx-c{transform:rotate(180deg)}.cx ul{display:none;position:absolute;z-index:5;left:0;right:0;top:46px;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);max-height:150px;overflow:auto}.cx.open ul{display:block}.cx li{padding:8px 10px;font-size:14px;border-radius:7px;cursor:pointer}.cx li.a,.cx li:hover{background:#f4f4f4}.cx p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<script>
const root=document.querySelector('.cx'),inp=document.getElementById('cx1'),ul=document.getElementById('cxl');const D=['React','Vue','Svelte','Angular','Solid','Astro','Next.js','Nuxt','Remix','Qwik'];let a=-1,cur=[];function draw(){const q=inp.value.toLowerCase();cur=D.filter(x=>x.toLowerCase().includes(q));ul.innerHTML=cur.length?cur.map((x,i)=>'<li role=option class="'+(i===a?'a':'')+'">'+x+'</li>').join(''):'<li>No results</li>'}function open(v){root.classList.toggle('open',v);inp.setAttribute('aria-expanded',v)}inp.addEventListener('focus',()=>{a=-1;draw();open(true)});inp.addEventListener('input',()=>{a=-1;draw();open(true)});inp.addEventListener('keydown',e=>{if(e.key==='ArrowDown'){a=Math.min(a+1,cur.length-1);draw();e.preventDefault()}else if(e.key==='ArrowUp'){a=Math.max(a-1,0);draw();e.preventDefault()}else if(e.key==='Enter'&&cur[a]){inp.value=cur[a];open(false)}else if(e.key==='Escape')open(false)});ul.addEventListener('mousedown',e=>{const l=e.target.closest('li');if(l&&cur.length){inp.value=l.textContent;open(false)}});document.addEventListener('mousedown',e=>{if(!root.contains(e.target))open(false)});
</script>

<label class='cb'><input type='checkbox'><span class='cb-b'><svg viewBox='0 0 16 16' width='12' height='12' fill='none' stroke='#fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.2 3.2L13 4.8'/></svg></span><span class='cb-t'><b>I agree to the terms and privacy policy</b><small>You can unsubscribe at any time.</small></span></label>

<style>
.cb{display:flex;gap:10px;align-items:flex-start;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111;cursor:pointer}.cb input{position:absolute;opacity:0;pointer-events:none}.cb-b{flex:none;width:18px;height:18px;margin-top:1px;border:1px solid #d4d4d4;border-radius:5px;background:#fff;display:grid;place-items:center;transition:background .15s,border-color .15s,box-shadow .15s}.cb-b svg{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .2s ease .05s}.cb input:checked+.cb-b{background:#111;border-color:#111}.cb input:checked+.cb-b svg{stroke-dashoffset:0}.cb input:focus-visible+.cb-b{box-shadow:0 0 0 3px rgba(17,17,17,.15)}.cb-t b{display:block;font-weight:400;font-size:14px}.cb-t small{display:block;margin-top:3px;font-size:12.5px;color:#737373}
</style>

<div class='ta'><div class='ta-h'><label for='ta1'>Message</label><span id='tac'>0/500</span></div><textarea id='ta1' maxlength='500' placeholder='Tell us about your project...'></textarea></div>

<style>
.ta{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ta-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.ta label{font-size:14px;font-weight:500}.ta-h span{font-size:12.5px;color:#a3a3a3;transition:color .15s}.ta-h span.w{color:#d97706}.ta textarea{width:100%;box-sizing:border-box;height:100px;padding:10px 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;resize:vertical;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.ta textarea::placeholder{color:#a3a3a3}.ta textarea:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
</style>

<script>
const t=document.getElementById('ta1'),c=document.getElementById('tac');t.addEventListener('input',()=>{c.textContent=t.value.length+'/500';c.classList.toggle('w',t.value.length>450)});
</script>

<div class='pf'><label for='pf1'>Password</label><div class='pf-w'><input id='pf1' type='password' placeholder='Enter password'><button type='button' id='pfb' aria-label='Show password'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/><path class='sl' d='M4 4l16 16'/></svg></button></div><p>Use at least 8 characters with a number and symbol.</p></div>

<style>
.pf{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.pf label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.pf-w{position:relative}.pf input{width:100%;box-sizing:border-box;height:40px;padding:0 42px 0 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.pf input::placeholder{color:#a3a3a3}.pf input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.pf button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#737373;border-radius:8px;cursor:pointer}.pf button:hover{color:#111;background:#f4f4f4}.pf .sl{opacity:0}.pf button.on .sl{opacity:1}.pf p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<script>
const i=document.getElementById('pf1'),b=document.getElementById('pfb');b.addEventListener('click',()=>{const s=i.type==='password';i.type=s?'text':'password';b.classList.toggle('on',s);b.setAttribute('aria-label',s?'Hide password':'Show password')});
</script>

<div class='tf'><label for='tf1'>Full name</label><input id='tf1' type='text' placeholder='Jane Cooper' aria-describedby='tf1h'><p id='tf1h'>As shown on your government ID.</p></div>

<style>
.tf{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.tf label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.tf input{width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.tf input::placeholder{color:#a3a3a3}.tf input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.tf p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<div class='ms' role='status'><span class='ms-o'></span><span class='ms-t'>Searching</span></div>

<style>
.ms{display:flex;align-items:center;justify-content:center;gap:14px;min-height:200px;width:100%;background:#000;font-family:Inter,Arial,sans-serif;font-size:16px}.ms-o{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#f5d0ee,#a3548f 45%,#2b0f27 100%);box-shadow:0 0 14px rgba(220,120,200,.45);animation:ms-p 2s ease-in-out infinite}.ms-t{background:linear-gradient(90deg,#666 0%,#666 35%,#fff 50%,#666 65%,#666 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ms-s 2.2s linear infinite}@keyframes ms-p{50%{transform:scale(.86);box-shadow:0 0 22px rgba(220,120,200,.7)}}@keyframes ms-s{from{background-position:120% 0}to{background-position:-120% 0}}
</style>

<div class='ts' aria-label='Loading' role='status'><i style='--i:0'></i><i style='--i:1'></i><i style='--i:2'></i><i style='--i:3'></i><i style='--i:4'></i><i style='--i:5'></i><i style='--i:6'></i><i style='--i:7'></i><i style='--i:8'></i><i style='--i:9'></i><i style='--i:10'></i><i style='--i:11'></i></div>

<style>
.ts{position:relative;width:1.6em;height:1.6em;font-size:28px;margin:auto;display:block}.ts i{position:absolute;left:50%;top:0;width:.09em;height:.4em;margin-left:-.045em;border-radius:.05em;background:#111;transform-origin:50% .8em;transform:rotate(calc(var(--i)*30deg));opacity:.12;animation:ts-f 1s linear infinite;animation-delay:calc(var(--i)*-.0833s)}@keyframes ts-f{0%{opacity:1}100%{opacity:.12}}
</style>

<div class='gl'><span class='gl-w' id='glw'>Hello</span></div>

<style>
.gl{display:grid;place-items:center;min-height:200px;width:100%;background:#000;color:#fff;font-family:'Helvetica Neue',Arial,sans-serif}.gl-w{font-size:28px;font-weight:300;letter-spacing:.02em;transition:opacity .6s ease,transform .6s ease}.gl-w.out{opacity:0;transform:translateY(6px) scale(.98)}
</style>

<script>
const w=document.getElementById('glw');const L=['Hello','Hola','Bonjour','Ciao','Hallo','Namaste','こんにちは','안녕하세요'];let i=0;setInterval(()=>{w.classList.add('out');setTimeout(()=>{i=(i+1)%L.length;w.textContent=L[i];w.classList.remove('out')},600)},2200);
</script>

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

<label class="cs"><input type="checkbox" role="switch" aria-label="Toggle" checked><span class="cs__track"><span class="cs__thumb"></span></span></label>

<style>
.cs{position:relative;display:inline-block;width:60px;height:36px}
.cs input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cs__track{position:absolute;inset:0;border-radius:36px;background:#cbd5e1;border:3px solid #e2e8f0;box-shadow:inset 0 1px 3px rgba(0,0,0,.12);transition:background-color .25s ease}
.cs__thumb{position:absolute;top:1px;left:1px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.3,1.2,.5,1)}
.cs input:checked+.cs__track{background:#0ea5e9}
.cs input:checked+.cs__track .cs__thumb{transform:translateX(24px)}
.cs input:focus-visible+.cs__track{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cs__track,.cs__thumb{transition:none}}
</style>