Neumorfe knoppen, licht New
Soft, light buttons that seem to rise out of the surface and sink into it when switched on or pressed (two shadows, light top left and dark bottom right). Shown as a thermostat panel with an on/off button (aria-pressed) and plus/minus for the temperature. Since neumorphism has little contrast, the on state gets an orange signal and every button a clear focus ring. Use it for calm control panels, configurators and smart home pages, not as a site's main call to action.
Woonkamer
20,5 °C
How to use it
- Paste the HTML where the buttons should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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'));More buttons
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →