Knoppenset met drukgevoel New
A calm default set like real top sites use: primary, secondary and ghost with a 2 px lift on hover, a hard shadow that sinks when pressed and scale .975, plus focus, disabled and loading states. Only transform and box-shadow in 160 ms, works everywhere; with reduced motion no movement, colour only.
hover: lift 2pxindrukken: schaduw wegtab: focusring
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.
- No JavaScript needed.
<!-- Knoppenset met drukgevoel · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dfs">
<div class="dfs__row">
<button class="dfs__b dfs__b--p" type="button">Afspraak maken</button>
<button class="dfs__b dfs__b--s" type="button">Bekijk tarieven</button>
<button class="dfs__b dfs__b--g" type="button">Meer info</button>
</div>
<div class="dfs__row">
<button class="dfs__b dfs__b--p" type="button" disabled>Uitgeschakeld</button>
<button class="dfs__b dfs__b--p is-busy" type="button" aria-disabled="true" aria-busy="true"><span class="dfs__spin" aria-hidden="true"></span>Versturen</button>
<button class="dfs__b dfs__b--s" type="button" disabled>Geen plek</button>
</div>
<p class="dfs__lgd"><span>hover: lift 2px</span><span>indrukken: schaduw weg</span><span>tab: focusring</span></p>
</div>
</div>/* Knoppenset met drukgevoel · NedDev · eigen werk. */
.dfs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif}
.dfs__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.dfs__b{appearance:none;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 'Switzer',sans-serif;padding:12px 17px;border-radius:6px;cursor:pointer;transition:transform .16s cubic-bezier(.3,.7,.3,1),box-shadow .16s cubic-bezier(.3,.7,.3,1),background-color .16s,color .16s}
.dfs__b--p{background:#0a0a0a;color:#fff;border:1px solid #0a0a0a;box-shadow:3px 3px 0 #F5480F}
.dfs__b--s{background:#fff;color:#0a0a0a;border:1px solid #0a0a0a;box-shadow:3px 3px 0 #0a0a0a}
.dfs__b--g{background:transparent;color:#0a0a0a;border:1px solid transparent;text-decoration:underline;text-decoration-color:#F5480F;text-decoration-thickness:2px;text-underline-offset:4px}
.dfs__b:not(:disabled):not(.is-busy):hover{transform:translate(-1px,-2px)}
.dfs__b--p:not(:disabled):not(.is-busy):hover{box-shadow:4px 5px 0 #F5480F}
.dfs__b--s:not(:disabled):not(.is-busy):hover{box-shadow:4px 5px 0 #0a0a0a}
.dfs__b--g:not(:disabled):hover{background:#e8e5e0;transform:none}
.dfs__b:not(:disabled):not(.is-busy):active{transform:translate(3px,3px) scale(.975);box-shadow:0 0 0 transparent;transition-duration:.06s}
.dfs__b--g:not(:disabled):active{transform:scale(.975)}
.dfs__b:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.dfs__b--p:focus-visible{outline-color:#0a0a0a}
.dfs__b:disabled{background:#e3e0db;color:#5f5a54;border-color:#cfcac3;box-shadow:none;cursor:not-allowed}
.dfs__b.is-busy{cursor:progress;box-shadow:1px 1px 0 #F5480F}
.dfs__spin{width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:dfs-rot .7s linear infinite}
@keyframes dfs-rot{to{transform:rotate(1turn)}}
.dfs__lgd{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:2px 0 0;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#5f5a54}
@media (prefers-reduced-motion:reduce){.dfs__b{transition:background-color .16s,color .16s}.dfs__b:hover,.dfs__b:active{transform:none!important}.dfs__spin{animation-duration:2.4s}}
@media (max-width:420px){.dfs__b{font-size:13px;padding:10px 13px}.dfs__lgd{display:none}}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 →