Gradientknapper i CSS, der føles eksklusive

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.

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

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.

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 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.

Mere om matematikken og grænserne findes i farvekontrast og tilgængelighed, og den samme regel gælder enhver tekst på en gradientbaggrund.

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.

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

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.

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.

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

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.

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

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 forklarer hvorfor.
• En konisk glans, sparsomt. Et svagt konisk lag kan give et metallisk glimt. Se CSS conic gradients.