CSS-lab · Knoppen
Brutalist schaduw-knop
Een rauwe knop met dikke zwarte rand en een harde offset-schaduw die bij hover inklapt, zodat de knop fysiek lijkt in te drukken.
- Beginner
- Pure CSS
- MIT-licentie
box-shadowtransformtransitioncalc():active
<div class="bk-wrap">
<a href="#" class="bk-btn">
<span>Start je project</span>
<span class="bk-arrow" aria-hidden="true">→</span>
</a>
<button type="button" class="bk-btn bk-btn--acid">Bekijk werk</button>
</div>/* Brutalist schaduw-knop - prefix .bk- */
.bk-wrap {
--ink: #0C0C0D;
--paper: #F9F8F6;
--accent: #C6FF3D;
--offset: 6px;
--speed: 140ms;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 28px;
}
/* Basis: dikke rand + harde schaduw zonder blur */
.bk-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 18px 28px;
font: 900 1.05rem/1 "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
color: var(--ink);
background: var(--paper);
border: 3px solid var(--ink);
border-radius: 0;
box-shadow: var(--offset) var(--offset) 0 var(--ink);
cursor: pointer;
transition:
transform var(--speed) ease-out,
box-shadow var(--speed) ease-out;
}
.bk-btn--acid {
background: var(--accent);
}
/* Hover: knop schuift half naar de schaduw toe */
.bk-btn:hover {
transform: translate(calc(var(--offset) / 2), calc(var(--offset) / 2));
box-shadow: calc(var(--offset) / 2) calc(var(--offset) / 2) 0 var(--ink);
}
/* Active: volledig ingedrukt, schaduw weg */
.bk-btn:active {
transform: translate(var(--offset), var(--offset));
box-shadow: 0 0 0 var(--ink);
}
/* Pijl schuift mee */
.bk-arrow {
display: inline-block;
transition: transform var(--speed) ease-out;
}
.bk-btn:hover .bk-arrow {
transform: translateX(4px);
}
/* Duidelijke focus voor toetsenbordgebruikers */
.bk-btn:focus-visible {
outline: 3px dashed var(--ink);
outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
.bk-btn,
.bk-arrow {
transition: none;
}
.bk-btn:hover .bk-arrow {
transform: none;
}
}Wat het is en waar je het gebruikt
De brutalist schaduw-knop is een call-to-action die niet subtiel wil zijn. Een dikke zwarte rand, hoekige vormen en een harde schaduw zonder blur geven de knop het gevoel van een stuk karton dat boven de pagina zweeft. Bij hover schuift de knop een stukje naar zijn eigen schaduw toe, en bij klikken valt hij er helemaal in. Zo voelt een klik weer als een klik.
Je gebruikt hem in brutalistische of editoriale ontwerpen, op landingspagina’s met een uitgesproken merk, of als contrastpunt in een verder rustige interface. De demo toont twee varianten: een off-white knop met pijl en een acid-lime variant voor de belangrijkste actie.
Zo werkt het
- De schaduw is een
box-shadowmet een blur van0:var(--offset) var(--offset) 0 var(--ink). Daardoor krijg je een massief blok in plaats van een zachte gloed. - Bij
:hoververplaatsttransform: translate()de knop over de halve offset, terwijl de schaduw evenveel krimpt. De onderkant van de schaduw blijft dus op dezelfde plek staan, waardoor het lijkt alsof de knop omlaag beweegt. - Bij
:activewordt de offset volledig opgeheven: de knop ligt plat op de pagina. - Met
calc(var(--offset) / 2)blijven alle stappen in verhouding als je de schaduwdiepte aanpast. - Het pijltje is een losse
spanmetaria-hidden="true"die bij hover een paar pixels naar rechts schuift.
Aanpassen
Alle knoppen in de wrapper .bk-wrap lezen dezelfde variabelen. Met --ink stel je de kleur van de rand, tekst en schaduw in. --paper is de standaard achtergrond en --accent de kleur van de modifier .bk-btn--acid. Met --offset bepaal je hoe diep de schaduw is (probeer 10px voor een nog zwaarder effect) en --speed regelt de duur van de transitie. Wil je ronde hoeken, dan zet je border-radius op de knop. De schaduw volgt die vorm vanzelf.
Toegankelijkheid en browsersupport
De demo gebruikt een echte <a> en een echte <button> met zichtbare tekst. Toetsenbordgebruikers zien een duidelijke gestippelde :focus-visible-outline op ruime afstand van de rand. Zwart op off-white en zwart op acid lime halen ruim voldoende contrast. In het prefers-reduced-motion-blok zijn de transities uitgeschakeld: de staat verandert direct, zonder beweging. De code gebruikt alleen breed ondersteunde CSS en werkt in alle actuele versies van Chrome, Edge, Firefox en Safari.
Verder lezen
Meer achtergrond over deze stijl lees je in ons artikel over brutalistisch webdesign. Wil je zulke details in je eigen site? Bekijk wat we doen op het gebied van webdesign.
Meer knoppen