3D-knop die indrukt Nieuw

<!-- 3D-knop die indrukt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="k3d">
<button class="k3d__b" type="button" data-msg="Proefles aangevraagd voor zaterdag 9:30 bij Dansschool Amersfoort."><span class="k3d__sh" aria-hidden="true"></span><span class="k3d__edge" aria-hidden="true"></span><span class="k3d__front">Plan een proefles</span></button>
<button class="k3d__b k3d__b--w" type="button" data-msg="Lessen zijn op maandag, woensdag en zaterdag."><span class="k3d__sh" aria-hidden="true"></span><span class="k3d__edge" aria-hidden="true"></span><span class="k3d__front">Bekijk het rooster</span></button>
<p class="k3d__st" aria-live="polite"></p>
</div>
</div>

/* 3D-knop die indrukt · NedDev · eigen werk. */
.k3d{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:22px 18px;padding:14px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.k3d *,.k3d *::before,.k3d *::after{box-sizing:border-box}
.k3d__b{position:relative;appearance:none;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.k3d__sh{position:absolute;inset:0;border-radius:8px;background:rgba(10,10,10,.22);transform:translateY(3px);filter:blur(3px);transition:transform .5s cubic-bezier(.3,.7,.4,1)}
.k3d__edge{position:absolute;inset:0;border-radius:8px;background:linear-gradient(90deg,#8e2805 0%,#b6360a 7%,#b6360a 93%,#8e2805 100%)}
.k3d__front{position:relative;display:block;padding:15px 26px;border-radius:8px;background:#F5480F;color:#0a0a0a;font:700 16px/1 'Switzer',sans-serif;transform:translateY(-7px);transition:transform .5s cubic-bezier(.3,.7,.4,1),background-color .16s ease}
.k3d__b--w .k3d__edge{background:#0a0a0a}
.k3d__b--w .k3d__front{background:#fff;color:#0a0a0a;box-shadow:inset 0 0 0 2px #0a0a0a}
.k3d__b:hover .k3d__front{transform:translateY(-9px);transition:transform .22s cubic-bezier(.3,.7,.4,1.5)}
.k3d__b:hover .k3d__sh{transform:translateY(5px);transition:transform .22s cubic-bezier(.3,.7,.4,1.5)}
.k3d__b:active .k3d__front,.k3d__b.is-down .k3d__front{transform:translateY(-2px);transition:transform 34ms}
.k3d__b:active .k3d__sh,.k3d__b.is-down .k3d__sh{transform:translateY(1px);transition:transform 34ms}
.k3d__b:focus-visible{outline:none}
.k3d__b:focus-visible .k3d__edge{outline:2px solid #0a0a0a;outline-offset:4px}
.k3d__b--w:hover .k3d__front{background:#faf9f7}
.k3d__st{flex-basis:100%;min-height:18px;margin:0;text-align:center;font:400 13px/1.35 'Switzer',sans-serif;color:#5d5953}
@media (prefers-reduced-motion:reduce){.k3d__front,.k3d__sh{transition:none!important}.k3d__b:hover .k3d__front{transform:translateY(-7px)}.k3d__b:hover .k3d__sh{transform:translateY(3px)}.k3d__b:hover .k3d__front{background:#ff5d24}.k3d__b--w:hover .k3d__front{background:#ece9e4}}

// 3D-knop die indrukt · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.k3d');if(!w)return;
var st=w.querySelector('.k3d__st');
[].forEach.call(w.querySelectorAll('.k3d__b'),function(b){
  b.addEventListener('keydown',function(e){if(e.key===' '||e.key==='Enter'){b.classList.add('is-down');if(e.key==='Enter')setTimeout(function(){b.classList.remove('is-down');},140);}});
  b.addEventListener('keyup',function(){b.classList.remove('is-down');});
  b.addEventListener('blur',function(){b.classList.remove('is-down');});
  b.addEventListener('click',function(){st.textContent=b.getAttribute('data-msg');});
});
}
init(document.querySelector('.jouw-container'));