Map die opengaat New
Folders as buttons: on hover or keyboard focus the front flap tilts forward (rotateX with perspective) and the documents slide out a little, so you can see there is something inside. Clicking opens the folder; the state is announced. For client portals, download centres, case overviews and project archives; with reduced motion the folder opens without the tilt.
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.
<!-- Map die opengaat · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kmp">
<div class="kmp__row">
<button class="kmp__f" type="button" aria-pressed="false" aria-label="Map Offertes 2026, 14 bestanden"><span class="kmp__vis" aria-hidden="true"><span class="kmp__back"></span><span class="kmp__p kmp__p--1"></span><span class="kmp__p kmp__p--2"></span><span class="kmp__p kmp__p--3"></span><span class="kmp__front"></span></span><span class="kmp__name">Offertes 2026</span><span class="kmp__meta">14 bestanden</span></button>
<button class="kmp__f kmp__f--dark" type="button" aria-pressed="false" aria-label="Map Foto's oplevering Deventer, 38 bestanden"><span class="kmp__vis" aria-hidden="true"><span class="kmp__back"></span><span class="kmp__p kmp__p--1 kmp__p--foto"></span><span class="kmp__p kmp__p--2 kmp__p--foto2"></span><span class="kmp__p kmp__p--3"></span><span class="kmp__front"></span></span><span class="kmp__name">Foto's oplevering</span><span class="kmp__meta">38 bestanden</span></button>
</div>
<p class="kmp__st" aria-live="polite"></p>
</div>
</div>/* Map die opengaat · NedDev · eigen werk. */
.kmp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.kmp *,.kmp *::before,.kmp *::after{box-sizing:border-box}
.kmp__row{display:flex;gap:18px}
.kmp__f{appearance:none;display:flex;flex-direction:column;align-items:center;gap:3px;width:142px;margin:0;padding:12px 8px 10px;border:0;border-radius:8px;background:transparent;color:#0a0a0a;cursor:pointer;transition:background-color .2s ease}
.kmp__f:hover,.kmp__f[aria-pressed="true"]{background:#e8e5e0}
.kmp__f:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.kmp__vis{position:relative;display:block;width:112px;height:84px;margin-bottom:6px;perspective:520px}
.kmp__back{position:absolute;left:0;right:0;bottom:0;top:10px;background:#c43a0c;border-radius:0 4px 4px 4px}
.kmp__back::before{content:'';position:absolute;left:0;top:-10px;width:44px;height:11px;background:#c43a0c;border-radius:4px 4px 0 0}
.kmp__p{position:absolute;left:12px;right:12px;top:16px;height:58px;background:#fff;border-radius:2px;background-image:linear-gradient(#d9d5ce,#d9d5ce),linear-gradient(#e6e2dc,#e6e2dc),linear-gradient(#e6e2dc,#e6e2dc),linear-gradient(#e6e2dc,#e6e2dc);background-size:46% 3px,76% 2px,70% 2px,58% 2px;background-position:8px 8px,8px 17px,8px 24px,8px 31px;background-repeat:no-repeat;transition:transform .32s cubic-bezier(.3,.7,.3,1)}
.kmp__p--2{left:18px;right:8px;top:14px}
.kmp__p--3{left:8px;right:18px;top:18px}
.kmp__p--foto{background:#7d8a6a;background-image:linear-gradient(160deg,#b9c4a8 0 38%,#6f7d5c 38% 60%,#4e5a40 60%)}
.kmp__p--foto2{background:#a99a86;background-image:linear-gradient(200deg,#e7ddd0 0 34%,#a99a86 34% 70%,#7b6b58 70%)}
.kmp__front{position:absolute;left:0;right:0;bottom:0;height:62px;background:#F5480F;border-radius:4px;transform-origin:50% 100%;transition:transform .32s cubic-bezier(.3,.7,.3,1),box-shadow .32s ease}
.kmp__f--dark .kmp__back,.kmp__f--dark .kmp__back::before{background:#2b2926}
.kmp__f--dark .kmp__front{background:#0a0a0a}
.kmp__name{font:600 14px/1.25 'Switzer',sans-serif}
.kmp__meta{font:400 13px/1.2 'Switzer',sans-serif;color:#5d5953}
.kmp__f:hover .kmp__front,.kmp__f:focus-visible .kmp__front,.kmp__f[aria-pressed="true"] .kmp__front{transform:rotateX(-34deg);box-shadow:0 -6px 12px rgba(10,10,10,.16)}
.kmp__f:hover .kmp__p--1,.kmp__f:focus-visible .kmp__p--1,.kmp__f[aria-pressed="true"] .kmp__p--1{transform:translateY(-14px) rotate(-5deg)}
.kmp__f:hover .kmp__p--2,.kmp__f:focus-visible .kmp__p--2,.kmp__f[aria-pressed="true"] .kmp__p--2{transform:translateY(-20px) rotate(4deg)}
.kmp__f:hover .kmp__p--3,.kmp__f:focus-visible .kmp__p--3,.kmp__f[aria-pressed="true"] .kmp__p--3{transform:translateY(-8px)}
.kmp__st{min-height:18px;margin:0;font:400 13px/1.35 'Switzer',sans-serif;color:#5d5953;text-align:center}
@media (max-width:400px){.kmp__row{gap:10px}.kmp__f{width:132px}}
@media (prefers-reduced-motion:reduce){.kmp__front,.kmp__p,.kmp__f{transition:none}.kmp__f:hover .kmp__front,.kmp__f:focus-visible .kmp__front,.kmp__f[aria-pressed="true"] .kmp__front{transform:scaleY(.82)}}// Map die opengaat · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.kmp');if(!w)return;
var fs=[].slice.call(w.querySelectorAll('.kmp__f')),st=w.querySelector('.kmp__st');
fs.forEach(function(f){f.addEventListener('click',function(){var on=f.getAttribute('aria-pressed')!=='true';
fs.forEach(function(o){o.setAttribute('aria-pressed','false');});f.setAttribute('aria-pressed',String(on));
var n=f.querySelector('.kmp__name').textContent,m=f.querySelector('.kmp__meta').textContent;
st.textContent=on?(n+' geopend, '+m):(n+' gesloten');});});
}
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 →