Neumorfe knoppen, licht Nieuw

<!-- Neumorfe knoppen, licht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="knm">
<div class="knm__panel">
<button class="knm__power" type="button" aria-pressed="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v8"/><path d="M6.6 6.6a7.5 7.5 0 1 0 10.8 0"/></svg><span class="knm__name">Vloerverwarming</span><span class="knm__state">Aan</span></button>
<div class="knm__temp">
<span class="knm__room">Woonkamer</span>
<span class="knm__val" aria-live="polite">20,5 °C</span>
<div class="knm__btns">
<button class="knm__step" type="button" data-d="-0.5" aria-label="Halve graad lager"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10"/></svg></button>
<button class="knm__step" type="button" data-d="0.5" aria-label="Halve graad hoger"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10M8 3v10"/></svg></button>
</div>
</div>
</div>
</div>
</div>

/* Neumorfe knoppen, licht · NedDev · eigen werk. */
.knm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:#ebe9e5;color:#0a0a0a;font-family:'Switzer',sans-serif}
.knm *,.knm *::before,.knm *::after{box-sizing:border-box}
.knm__panel{display:flex;align-items:center;gap:22px;padding:18px 22px;border-radius:8px;background:#ebe9e5;box-shadow:9px 9px 22px #d0ccc5,-9px -9px 22px #ffffff}
.knm__power{appearance:none;width:104px;height:104px;margin:0;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;border-radius:8px;background:#ebe9e5;color:#5d5953;cursor:pointer;box-shadow:6px 6px 14px #d0ccc5,-6px -6px 14px #ffffff;transition:box-shadow .2s ease,color .2s ease}
.knm__power svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:stroke .2s ease}
.knm__power[aria-pressed="true"]{color:#0a0a0a;box-shadow:inset 5px 5px 11px #d0ccc5,inset -5px -5px 11px #ffffff}
.knm__power[aria-pressed="true"] svg{stroke:#F5480F}
.knm__name{font:600 12px/1.15 'Switzer',sans-serif;text-align:center}
.knm__state{font:500 12px/1 'Switzer',sans-serif;color:#5d5953}
.knm__power[aria-pressed="true"] .knm__state{color:#b8340a}
.knm__power:active{box-shadow:inset 6px 6px 12px #cbc6be,inset -6px -6px 12px #ffffff}
.knm__temp{display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:opacity .2s ease}
.knm.is-off .knm__temp{opacity:.5}
.knm__room{font:500 13px/1 'Switzer',sans-serif;color:#5d5953}
.knm__val{font:700 32px/1 'Switzer',sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.knm__btns{display:flex;gap:12px;margin-top:6px}
.knm__step{appearance:none;width:42px;height:42px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:#ebe9e5;color:#0a0a0a;cursor:pointer;box-shadow:4px 4px 10px #d0ccc5,-4px -4px 10px #ffffff;transition:box-shadow .15s ease,color .15s ease}
.knm__step svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.knm__step:hover{color:#b8340a}
.knm__step:active,.knm__step.is-down{box-shadow:inset 3px 3px 8px #d0ccc5,inset -3px -3px 8px #ffffff}
.knm__step:disabled{color:#a8a39b;cursor:not-allowed;box-shadow:2px 2px 6px #d6d2cb,-2px -2px 6px #ffffff}
.knm__power:focus-visible,.knm__step:focus-visible{outline:2px solid #F5480F;outline-offset:4px}
@media (max-width:400px){.knm__panel{gap:16px;padding:14px 16px}.knm__power{width:92px;height:92px}.knm__val{font-size:28px}}
@media (prefers-reduced-motion:reduce){.knm__power,.knm__step,.knm__temp{transition:none}}

// Neumorfe knoppen, licht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.knm');if(!w)return;
var pw=w.querySelector('.knm__power'),st=w.querySelector('.knm__state'),val=w.querySelector('.knm__val');
var steps=[].slice.call(w.querySelectorAll('.knm__step')),t=20.5;
function render(){val.textContent=t.toFixed(1).replace('.',',')+' °C';steps[0].disabled=t<=15;steps[1].disabled=t>=24;}
pw.addEventListener('click',function(){var on=pw.getAttribute('aria-pressed')!=='true';pw.setAttribute('aria-pressed',String(on));st.textContent=on?'Aan':'Uit';w.classList.toggle('is-off',!on);});
steps.forEach(function(b){
  b.addEventListener('click',function(){t=Math.max(15,Math.min(24,t+parseFloat(b.getAttribute('data-d'))));render();});
  b.addEventListener('keydown',function(e){if(e.key===' '||e.key==='Enter')b.classList.add('is-down');});
  b.addEventListener('keyup',function(){b.classList.remove('is-down');});
  b.addEventListener('blur',function(){b.classList.remove('is-down');});
});
render();
}
init(document.querySelector('.jouw-container'));