Knoppenset met drukgevoel Nieuw

Rustige standaardset zoals op echte topsites: primair, secundair en ghost met 2 px lift bij hover, een harde schaduw die bij indrukken wegzakt en scale .975, plus de staten focus, uitgeschakeld en laden. Alleen transform en box-shadow in 160 ms, werkt overal; bij reduced motion geen beweging, wel kleur.

hover: lift 2pxindrukken: schaduw wegtab: focusring

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- 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}}

Meer uit knoppen

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →