Keyboard Shortcut Keys

<!-- Keyboard Shortcut Keys · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ksk-wrap"><p class="ksk-label">Opslaan</p><div class="ksk-combo"><kbd class="ksk-key" data-k="Control">Ctrl</kbd><span class="ksk-plus">+</span><kbd class="ksk-key" data-k="s">S</kbd></div></div>
</div>

/* Keyboard Shortcut Keys · NedDev · eigen werk. */
.ksk-wrap{text-align:center;font-family:'Switzer',system-ui,sans-serif}
.ksk-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.45);margin:0 0 16px}
.ksk-combo{display:flex;align-items:center;justify-content:center;gap:10px}.ksk-plus{color:rgba(10,10,10,.35);font-size:18px}
.ksk-key{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;color:#0a0a0a;background:#fff;min-width:30px;padding:10px 14px;border-radius:9px;border:1px solid rgba(10,10,10,.14);box-shadow:0 4px 0 rgba(10,10,10,.16),0 6px 10px rgba(10,10,10,.10);transition:transform .08s,box-shadow .08s,background .12s,color .12s;cursor:pointer}
.ksk-key.is-down{transform:translateY(4px);box-shadow:0 0 0 rgba(10,10,10,.16);background:#F5480F;color:#fff;border-color:#F5480F}

// Keyboard Shortcut Keys · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.ksk-wrap')||root;var keys=[].slice.call(root.querySelectorAll('.ksk-key'));function find(k){return keys.filter(function(e){return e.dataset.k.toLowerCase()===String(k).toLowerCase();});}function press(el){el.classList.add('is-down');}function release(el){el.classList.remove('is-down');}keys.forEach(function(el){el.addEventListener('mousedown',function(){press(el);});el.addEventListener('mouseup',function(){release(el);});el.addEventListener('mouseleave',function(){release(el);});el.addEventListener('touchstart',function(){press(el);},{passive:true});el.addEventListener('touchend',function(){release(el);});});window.addEventListener('keydown',function(e){find(e.key).forEach(press);});window.addEventListener('keyup',function(e){find(e.key).forEach(release);});
}
init(document.querySelector('.jouw-container'));