3D-knop die indrukt New

A button with real depth: a front face above a darker edge and a soft shadow. On hover it rises slightly, when pressed the face sinks almost onto the edge and then springs back. Works with Space and Enter too (it sinks just the same). Three layers with only transform, so cheap for the browser. For playful brands, gyms, childcare and promotions; with reduced motion only colour.

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.

<!-- 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'));

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 →