# Gradientknapper i CSS som føles eksklusive

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

De fleste gradientknapper ser billige ut av de samme få grunnene: for mange fargetoner, en hover som hopper og tekst som forsvinner i den lyse enden. Her er oppskriften som unngår alle tre.

## The short version

- En eksklusiv gradientknapp blander vanligvis to nabofargetoner med lik lyshet, med et svakt høylys langs overkanten.
- Gradienter kan ikke overtones, så en jevn hover flytter en overdimensjonert gradient med background-position eller toner ut et overlegg med opacity.
- Hvit tekst på en gradientknapp trenger minst 4,5:1 kontrast mot den lyseste delen av gradienten, ikke bare den mørkeste.
- En trykket tilstand kan være så enkel som å skyve knappen ned én piksel og fjerne den ytre skyggen.
- Gradientknapper fungerer best som den ene primærhandlingen på en skjerm, mens sekundære handlinger holdes flate eller med omriss.

Å skrive **CSS for gradientknapper** som ser eksklusive ut, handler om tilbakeholdenhet. Velg to nabofargetoner med lik lyshet, legg til et svakt høylys langs overkanten, flytt gradienten ved hover i stedet for å bytte den, og sjekk at teksten leses mot den lyseste delen. Den høylytte versjonen med regnbuekant er lett å lage og lett å kjenne igjen som en mal, mens den stille versjonen er det som får et produkt til å føles ferdig.

```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 oppskriften: en gradient med dobbel bredde som glir ved hover, et høylys øverst, en farget skygge og en trykket tilstand.

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

Knappens gradient i full bredde. I hvile ser du venstre halvdel, og ved hover glir den til høyre halvdel, som ender på indigo igjen.

## Dempede og kraftige gradientknapper

En dempet knapp bruker to fargetoner som ligger ved siden av hverandre på fargehjulet, som indigo og lilla, så gradienten leses som dybde og ikke dekorasjon. En kraftig knapp spenner over fjerne fargetoner og blir det mest fargerike på siden. Kraftig kan fungere for ett enkelt lanseringsøyeblikk eller en leken merkevare, mens dempet fungerer overalt ellers. Hver palett under holder hvit tekst over 4,5:1 i begge ender.

- Dempet: indigo til lilla: `linear-gradient(110deg, #4f46e5, #9333ea)`
- Dempet: kongeblå til dyp turkis: `linear-gradient(110deg, #1d4ed8, #0e7490)`
- Varm: karmosin til brent oransje: `linear-gradient(110deg, #be123c, #c2410c)`
- Dristig: lilla til magenta: `linear-gradient(110deg, #9333ea, #c026d3)`

Knappegradienter som holder hvit tekst lesbar. Målte stopp: 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

En kontrastsjekker tar én bakgrunnsfarge, men en knapp har et spenn. Sjekk tekstfargen mot det lyseste stoppet, for det er der etiketten er svakest. Knappetekst i normal størrelse trenger 4,5:1 etter WCAG, og [WebAIMs kontrastsjekker](https://webaim.org/resources/contrastchecker/) gjør hvert stopp til en rask sjekk. Den vanlige feilen er en varm gradient som ender i gult eller lys oransje, noe som ser energisk ut og gjør halve etiketten uleselig.

### Unngå

- Oransje til gult, #f97316 til #fbbf24, under hvit tekst: 2,8 og 1,7 til 1
- Lyse pastellgradienter med hvite etiketter
- Å sjekke bare fargen bak den første bokstaven
- Tynne, lette skriftsnitt på en travel gradient

### Gjør

- Dype stopp med lik lyshet, som karmosin til brent oransje
- Mørk tekst på pastellgradienter i stedet
- Sjekk det lyseste stoppet og midtpunktet
- Snitt på 600 eller mer for etiketter på gradienter

Mer om regnestykket og grensene finner du i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility), og den samme regelen gjelder all [tekst på en gradientbakgrunn](https://gradiently.design/nb/guide/text-on-gradient).

## Jevne hover-tilstander for gradientknapper

`background-image` overtones ikke: bytt én gradient med en annen ved hover, så knipser den. Det finnes to jevne alternativer. Det første, brukt i oppskriften over, er å male gradienten dobbelt så bred og skyve `background-position`. Det andre er å legge hover-gradienten på et pseudoelement og tone ut dens opacity, noe som passer til hover som endrer farge 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 hover med kryssutfasing. Opacity er billig å animere, og etiketten forblir over overlegget.

Hold hover-endringene små. En gradient som skifter litt og en skygge som blir litt dypere føles responsiv, mens en knapp som skifter fargetone helt, føles ustabil. Legger du til kontinuerlig bevegelse, som en langsom skimring, skru den av for folk som foretrekker [redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion).

## Kanter, omriss og sekundære knapper

Én gradientknapp per skjerm er som regel riktig: den markerer primærhandlingen. Sekundære handlinger ser bedre ut i en omrisstil som gjentar gradienten i en tynn kant. To bakgrunner, én klippet til padding-boksen og én til border-boksen, gir et avrundet gradientomriss med heldekkende 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;
}
```

Et gradientomriss til sekundære handlinger. [Gradientkanter i CSS](https://gradiently.design/nb/guide/css-gradient-border) tar for seg gjennomsiktige og animerte versjoner.

## Deaktiverte og lastende tilstander

En deaktivert gradientknapp bør slutte å se ut som en invitasjon. Fjern gradienten helt i stedet for bare å senke opacity, som kan la en falmet, men fortsatt fargerik knapp stå igjen som folk prøver å trykke på. En flat, lavkontrast grå med `cursor: not-allowed` leses tydelig som utilgjengelig. For lasting, behold gradienten og bytt etiketten mot en spinner, så knappen ikke endrer størrelse.

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

Deaktivert betyr flat. Gradienten kommer tilbake bare når handlingen er tilgjengelig.

## Finpuss som leses som eksklusivt

- **Et høylys øverst.** `inset 0 1px 0 rgb(255 255 255 / 0.25)` antyder en lyskilde over og gir flaten en svak krumning.
- **En farget skygge.** Skygge i knappens egen fargetone, i stedet for svart, får den til å gløde i stedet for å sveve.
- **Én vinkel for alt.** Bruk den samme gradientvinkelen, som 110deg, på hver gradientkontroll.
- **Merkevarefarger, ikke forhåndsinnstillinger.** Blandingen bør komme fra paletten din, og [gradient i merkevarebygging](https://gradiently.design/nb/guide/gradient-branding) forklarer hvorfor.
- **En konisk glans, sparsomt.** Et svakt konisk lag kan gi et metallisk glimt, se [koniske gradienter i CSS](https://gradiently.design/nb/guide/css-conic-gradient).

## FAQ

### Hvordan lager jeg en gradientknapp i CSS?

Sett `background-image: linear-gradient(110deg, #4f46e5, #9333ea)` på knappen, med hvit tekst, avrundede hjørner og en heldekkende `background-color` som reserve.

### Hvordan animerer jeg en gradientknapp ved hover?

Gjør gradienten dobbelt så bred med `background-size: 200% 100%` og overtone `background-position`, eller tone ut et pseudoelement som holder hover-gradienten.

### Hvorfor endrer gradientknappen min seg umiddelbart ved hover?

Nettlesere kan ikke overtone mellom to `background-image`-verdier. Flytt eller tone ut gradienten i stedet for å erstatte den.

### Hvilken tekstfarge fungerer på en gradientknapp?

Den fargen som når minst 4,5:1 kontrast mot den lyseste delen av gradienten. Hvit fungerer på dype gradienter, og mørk tekst passer til pasteller.

### Bør hver knapp bruke en gradient?

Nei. Bruk en gradient til den ene primærhandlingen på en skjerm og hold sekundære knapper flate eller med omriss, så den viktige skiller seg ut.