# Gradientknapper i CSS, der føles eksklusive

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

De fleste gradientknapper ser billige ud af de samme få grunde: for mange farvetoner, en hover, der springer, og tekst, der forsvinder i den lyse ende. Her er opskriften, der undgår alle tre.

## The short version

- En eksklusiv gradientknap blander som regel to nabofarvetoner med ens lysstyrke og et svagt højlys langs overkanten.
- Gradienter kan ikke overgå jævnt, så en blød hover flytter en overstor gradient med background-position eller fader et overlay med opacity.
- Hvid tekst på en gradientknap kræver mindst 4,5:1 kontrast mod den lyseste del af gradienten og ikke kun den mørkeste.
- En trykket tilstand kan være så enkel som at flytte knappen én pixel ned og fjerne dens ydre skygge.
- Gradientknapper virker bedst som den ene primære handling på en skærm, med sekundære handlinger holdt flade eller med kontur.

At skrive en **gradientknap i CSS**, der ser eksklusiv ud, handler om behersket. Vælg to nabofarvetoner med ens lysstyrke, tilføj et svagt højlys langs overkanten, flyt gradienten ved hover i stedet for at skifte den, og tjek, at teksten kan læses mod den lyseste del. Den højlydte version med regnbuekant er nem at lave og nem at genkende som en skabelon. Den dæmpede version er det, der får et produkt til at føles færdigt.

```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);
}
```

Hele opskriften: en gradient i dobbelt bredde, der glider ved hover, et højlys foroven, en farvet skygge og en trykket tilstand.

Indigo til lilla og tilbage: `linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5)`

Knappens gradient i fuld bredde. I hvile ser du den venstre halvdel. Ved hover glider den til den højre halvdel, som ender tilbage på indigo.

## Dæmpede og højlydte gradientknapper

En dæmpet knap bruger to farvetoner, der ligger ved siden af hinanden på farvehjulet, som indigo og lilla, så gradienten læses som dybde og ikke som pynt. En højlydt knap spænder over fjerne farvetoner og bliver det mest farverige på siden. Højlydt kan virke til ét lanceringsøjeblik eller et legende brand. Dæmpet virker alle andre steder. Hver palet herunder holder hvid tekst over 4,5:1 i begge ender.

- Dæmpet: indigo til lilla: `linear-gradient(110deg, #4f46e5, #9333ea)`
- Dæmpet: kongeblå til dyb turkis: `linear-gradient(110deg, #1d4ed8, #0e7490)`
- Varm: karminrød til brændt orange: `linear-gradient(110deg, #be123c, #c2410c)`
- Dristig: lilla til magenta: `linear-gradient(110deg, #9333ea, #c026d3)`

Knapgradienter, der holder hvid tekst læsbar. Målte stop: 6,3 og 5,4, 6,7 og 5,4, 6,3 og 5,2, 5,4 og 4,7 til 1.

## Tekstkontrast på gradientknapper

Et kontrastværktøj tager én baggrundsfarve, men en knap har et spænd. Tjek tekstfarven mod det lyseste stop, for det er dér, teksten er svagest. Knaptekst i normal størrelse kræver 4,5:1 efter WCAG, og [WebAIM’s kontrastværktøj](https://webaim.org/resources/contrastchecker/) gør hvert stop til et hurtigt tjek. Den sædvanlige fejl er en varm gradient, der ender i gul eller lys orange, som ser energisk ud og efterlader halvdelen af teksten ulæselig.

### Undgå

- Orange til gul, #f97316 til #fbbf24, under hvid tekst: 2,8 og 1,7 til 1
- Lyse pastelgradienter med hvide labels
- Kun at tjekke farven bag det første bogstav
- Tynde, lette skriftsnit på en travl gradient

### Gør

- Dybe stop med ens lysstyrke, som karminrød til brændt orange
- Mørk tekst på pastelgradienter i stedet
- Tjek det lyseste stop og midtpunktet
- Skriftsnit på 600 eller mere til labels på gradienter

Mere om matematikken og grænserne findes i [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility), og den samme regel gælder enhver [tekst på en gradientbaggrund](https://gradiently.design/da/guide/text-on-gradient).

## Bløde hover-tilstande til gradientknapper

`background-image` overgår ikke jævnt: skifter du en gradient med en anden ved hover, springer den. Der er to bløde alternativer. Det første, brugt i opskriften ovenfor, er at male gradienten dobbelt så bred og lade `background-position` glide. Det andet er at lægge hover-gradienten på et pseudoelement og fade dets opacity, hvilket passer til hovers, der ændrer farve helt.

```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;
}
```

En krydsfade-hover. Opacity er billig at animere, og teksten ligger over overlayet.

Hold hover-ændringer små. En gradient, der flytter sig lidt, og en skygge, der bliver en smule dybere, føles responsivt. En knap, der skifter farvetone helt, føles ustabil. Tilføjer du kontinuerlig bevægelse, som en langsom glimmer, så slå den fra for folk, der foretrækker [reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion).

## Kanter, konturer og sekundære knapper

Én gradientknap pr. skærm er som regel rigtigt: den markerer den primære handling. Sekundære handlinger ser bedre ud i en kontur, der giver gradienten ekko i en tynd kant. To baggrunde, én klippet til padding-boksen og én til border-boksen, giver en afrundet gradientkontur med en massiv midte.

```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;
}
```

En gradientkontur til sekundære handlinger. [CSS-gradientkanter](https://gradiently.design/da/guide/css-gradient-border) gennemgår gennemsigtige og animerede versioner.

## Deaktiverede tilstande og indlæsning

En deaktiveret gradientknap skal holde op med at ligne en invitation. Fjern gradienten helt i stedet for blot at sænke opacity, hvilket kan efterlade en falmet, stadig farverig knap, som folk prøver at trykke på. En flad grå med lav kontrast og `cursor: not-allowed` læses tydeligt som utilgængelig. Ved indlæsning beholder du gradienten og bytter teksten ud med en spinner, så knappen ikke skifter størrelse.

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

Deaktiveret betyder flad. Gradienten vender kun tilbage, når handlingen er tilgængelig.

## Finpudsning, der læses som eksklusiv

- **Et højlys foroven.** `inset 0 1px 0 rgb(255 255 255 / 0.25)` antyder en lyskilde ovenfra og giver fladen en let krumning.
- **En farvet skygge.** Skygge i knappens egen farvetone frem for sort får den til at gløde i stedet for at svæve.
- **Én vinkel til alt.** Brug den samme gradientvinkel, som 110deg, på hver gradientkontrol.
- **Brandfarver, ikke forudindstillinger.** Blandingen bør komme fra din palet. [Gradientbranding](https://gradiently.design/da/guide/gradient-branding) forklarer hvorfor.
- **En konisk glans, sparsomt.** Et svagt konisk lag kan give et metallisk glimt. Se [CSS conic gradients](https://gradiently.design/da/guide/css-conic-gradient).

## FAQ

### Hvordan laver jeg en gradientknap i CSS?

Sæt `background-image: linear-gradient(110deg, #4f46e5, #9333ea)` på knappen, med hvid tekst, afrundede hjørner og en massiv `background-color` som reserve.

### Hvordan animerer jeg en gradientknap ved hover?

Gør gradienten dobbelt så bred med `background-size: 200% 100%`, og lad `background-position` overgå, eller fad et pseudoelement, der rummer hover-gradienten.

### Hvorfor skifter min gradientknap øjeblikkeligt ved hover?

Browsere kan ikke lade to `background-image`-værdier overgå jævnt. Flyt eller fad gradienten i stedet for at erstatte den.

### Hvilken tekstfarve virker på en gradientknap?

Den, der når mindst 4,5:1 kontrast mod den lyseste del af gradienten. Hvid virker på dybe gradienter. Mørk tekst passer til pasteller.

### Skal hver knap bruge en gradient?

Nej. Brug en gradient til den ene primære handling på en skærm, og hold sekundære knapper flade eller med kontur, så den vigtige skiller sig ud.