# Kleurverloopknoppen in CSS die premium aanvoelen

[Canonical HTML page](https://gradiently.design/nl/guide/css-gradient-button)

De meeste kleurverloopknoppen zien er goedkoop uit om dezelfde paar redenen: te veel tinten, een hover die springt en tekst die vervaagt in het lichte eind. Dit recept vermijdt alle drie.

## The short version

- Een premium kleurverloopknop mengt meestal twee naburige tinten met vergelijkbare lichtheid, met een vage highlight langs de bovenrand.
- Kleurverlopen kunnen niet overgaan, dus een vloeiende hover verplaatst een te groot kleurverloop met background-position of laat een overlay vervagen met opacity.
- Witte tekst op een kleurverloopknop heeft minstens 4,5:1 contrast nodig tegen het lichtste deel van het kleurverloop, niet alleen het donkerste.
- Een ingedrukte staat kan zo simpel zijn als de knop een pixel naar beneden schuiven en zijn buitenste schaduw weghalen.
- Kleurverloopknoppen werken het best als de ene primaire actie op een scherm, met secundaire acties vlak of omlijnd.

**CSS voor kleurverloopknoppen** die premium ogen draait om terughoudendheid. Kies twee naburige tinten met vergelijkbare lichtheid, voeg een vage highlight langs de bovenrand toe, verplaats het kleurverloop bij hover in plaats van het te vervangen en controleer dat de tekst leest tegen het lichtste deel. De luide versie met regenboograndje is makkelijk te maken en makkelijk als sjabloon te herkennen; de rustige versie geeft een product het gevoel af te zijn.

```css
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.4em;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  background-color: #4f46e5;
  background-image: linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 6px 16px -6px rgb(79 70 229 / 0.6);
  transition: background-position 0.5s ease, transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.button:hover {
  background-position: 100% 50%;
}

.button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
}
```

Het hele recept: een kleurverloop van dubbele breedte dat bij hover schuift, een highlight bovenaan, een gekleurde schaduw en een ingedrukte staat.

Indigo naar paars en terug: `linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5)`

Het kleurverloop van de knop op volle breedte. In rust zie je de linkerhelft; bij hover schuift het naar de rechterhelft, die weer eindigt op indigo.

## Subtiele versus luide kleurverloopknoppen

Een subtiele knop gebruikt twee tinten die op het kleurenwiel naast elkaar liggen, zoals indigo en paars, zodat het kleurverloop als diepte leest in plaats van decoratie. Een luide knop overspant verre tinten en wordt het kleurrijkste op de pagina. Luid kan werken voor één lanceringsmoment of een speels merk; subtiel werkt overal elders. Elk palet hieronder houdt witte tekst aan beide kanten boven 4,5:1.

- Subtiel: indigo naar paars: `linear-gradient(110deg, #4f46e5, #9333ea)`
- Subtiel: koningsblauw naar turquoise: `linear-gradient(110deg, #1d4ed8, #0e7490)`
- Warm: karmijn naar gebrand oranje: `linear-gradient(110deg, #be123c, #c2410c)`
- Gedurfd: paars naar magenta: `linear-gradient(110deg, #9333ea, #c026d3)`

Knopkleurverlopen waarop witte tekst leesbaar blijft. Gemeten stops: 6,3 en 5,4, 6,7 en 5,4, 6,3 en 5,2, 5,4 en 4,7 op 1.

## Tekstcontrast op kleurverloopknoppen

Een contrastchecker neemt één achtergrondkleur, maar een knop heeft een bereik. Controleer de tekstkleur tegen de lichtste stop, want daar is het label het zwakst. Knoptekst van normale grootte heeft onder WCAG 4,5:1 nodig, en met de [contrastchecker van WebAIM](https://webaim.org/resources/contrastchecker/) is elke stop snel gecontroleerd. De gebruikelijke fout is een warm kleurverloop dat eindigt in geel of lichtoranje, wat energiek oogt en de helft van het label onleesbaar laat.

### Vermijden

- Oranje naar geel, #f97316 naar #fbbf24, onder witte tekst: 2,8 en 1,7 op 1
- Lichte pastelkleurverlopen met witte labels
- Alleen de kleur achter de eerste letter controleren
- Dunne, lichte lettergewichten op een druk kleurverloop

### Doen

- Diepe stops met vergelijkbare lichtheid, zoals karmijn naar gebrand oranje
- Donkere tekst op pastelkleurverlopen
- De lichtste stop en het middelpunt controleren
- Gewichten van 600 of meer voor labels op kleurverlopen

Meer over de wiskunde en de drempels staat in [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility), en dezelfde regel geldt voor elke [tekst op een kleurverloopachtergrond](https://gradiently.design/nl/guide/text-on-gradient).

## Vloeiende hoverstaten voor kleurverloopknoppen

`background-image` gaat niet vloeiend over: verwissel bij hover het ene kleurverloop voor het andere en het klapt om. Er zijn twee vloeiende alternatieven. Het eerste, gebruikt in het recept hierboven, is het kleurverloop twee keer zo breed te schilderen en `background-position` te laten schuiven. Het tweede is het hoverkleurverloop op een pseudo-element te zetten en zijn opacity te laten vervagen, wat past bij hovers die de kleur helemaal veranderen.

```css
.button--fade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(110deg, #be123c, #c2410c);
}

.button--fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(110deg, #c2410c, #be123c);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button--fade:hover::before {
  opacity: 1;
}
```

Een crossfade-hover. Opacity is goedkoop te animeren en het label blijft boven de overlay.

Houd hoverwijzigingen klein. Een kleurverloop dat een beetje verschuift en een schaduw die iets dieper wordt voelen responsief; een knop die helemaal van tint verandert voelt onstabiel. Voeg je continue beweging toe, zoals een trage glinstering, zet die dan uit voor mensen die [verminderde beweging](https://gradiently.design/nl/guide/reduced-motion) verkiezen.

## Randen, contouren en secundaire knoppen

Eén kleurverloopknop per scherm is meestal goed: hij markeert de primaire actie. Secundaire acties zien er beter uit in een omlijnde stijl die het kleurverloop in een dunne rand herhaalt. Twee achtergronden, één begrensd tot de padding box en één tot de border box, geven een afgeronde kleurverloopcontour met een effen midden.

```css
.button--outline {
  border: 2px solid transparent;
  border-radius: 999px;
  color: #312e81;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(110deg, #4f46e5, #9333ea) border-box;
}
```

Een kleurverloopcontour voor secundaire acties. [CSS-kleurverloopborders](https://gradiently.design/nl/guide/css-gradient-border) behandelt transparante en geanimeerde versies.

## Uitgeschakelde en ladende staten

Een uitgeschakelde kleurverloopknop moet niet meer als uitnodiging ogen. Haal het kleurverloop helemaal weg in plaats van alleen de opacity te verlagen, want dat kan een vage, nog steeds kleurrijke knop achterlaten waar mensen op proberen te drukken. Een vlak, laag contrast grijs met `cursor: not-allowed` leest duidelijk als niet beschikbaar. Houd bij laden het kleurverloop en vervang het label door een spinner, zodat de knop niet van grootte springt.

```css
.button:disabled {
  background-image: none;
  background-color: #e5e7eb;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
}
```

Uitgeschakeld betekent vlak. Het kleurverloop komt alleen terug als de actie beschikbaar is.

## Afwerkingen die premium lezen

- **Een highlight bovenaan.** `inset 0 1px 0 rgb(255 255 255 / 0.25)` suggereert een lichtbron erboven en geeft het oppervlak een lichte welving.
- **Een gekleurde schaduw.** Schaduw in de eigen tint van de knop, in plaats van zwart, laat hem gloeien in plaats van zweven.
- **Eén hoek voor alles.** Gebruik dezelfde kleurverloophoek, zoals 110deg, op elk kleurverloopbesturingselement.
- **Merkkleuren, geen voorinstellingen.** De overgang moet uit je palet komen; [kleurverloopbranding](https://gradiently.design/nl/guide/gradient-branding) legt uit waarom.
- **Een conic glans, spaarzaam.** Een vage conic laag kan een metaalglans toevoegen; zie [CSS conic gradients](https://gradiently.design/nl/guide/css-conic-gradient).

## FAQ

### Hoe maak ik een kleurverloopknop in CSS?

Zet `background-image: linear-gradient(110deg, #4f46e5, #9333ea)` op de knop, met witte tekst, afgeronde hoeken en een effen `background-color` als terugval.

### Hoe animeer ik een kleurverloopknop bij hover?

Maak het kleurverloop twee keer zo breed met `background-size: 200% 100%` en laat `background-position` overgaan, of laat een pseudo-element met het hoverkleurverloop vervagen.

### Waarom verandert mijn kleurverloopknop direct bij hover?

Browsers kunnen niet overgaan tussen twee `background-image`-waarden. Verplaats of vervaag het kleurverloop in plaats van het te vervangen.

### Welke tekstkleur werkt op een kleurverloopknop?

De kleur die minstens 4,5:1 contrast haalt tegen het lichtste deel van het kleurverloop. Wit werkt op diepe kleurverlopen; donkere tekst past bij pastels.

### Moet elke knop een kleurverloop hebben?

Nee. Gebruik een kleurverloop voor de ene primaire actie op een scherm en houd secundaire knoppen vlak of omlijnd, zodat de belangrijke opvalt.