Gradientknappar i CSS som känns premium

Att skriva CSS för en gradientknapp som ser premium ut handlar om återhållsamhet. Välj två angränsande nyanser med liknande ljushet, lägg till en svag högdager längs överkanten, flytta gradienten vid hover i stället för att byta ut den och kontrollera att texten syns mot den ljusaste delen. Den högljudda versionen med regnbågskant är lätt att göra och lätt att känna igen som en mall. Den stillsamma versionen är det som får en produkt att kännas färdig.

.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ämpade eller högljudda gradientknappar

En dämpad knapp använder två nyanser som ligger bredvid varandra på färgcirkeln, som indigo och lila, så att gradienten läses som djup snarare än dekoration. En högljudd knapp spänner över avlägsna nyanser och blir det mest färgstarka på sidan. Högljutt kan fungera för ett enskilt lanseringsögonblick eller ett lekfullt varumärke. Dämpat fungerar överallt annars. Varje palett nedan håller vit text över 4,5:1 i båda ändar.

Textkontrast på gradientknappar

En kontrastkontroll tar en bakgrundsfärg, men en knapp har ett spann. Kontrollera textfärgen mot det ljusaste stoppet, eftersom det är där etiketten är svagast. Knapptext i normal storlek behöver 4,5:1 enligt WCAG, och WebAIM:s kontrastkontroll gör varje stopp till en snabb kontroll. Det vanliga felet är en varm gradient som slutar i gult eller ljusorange, som ser energisk ut och lämnar halva etiketten oläsbar.

Mer om matematiken och tröskelvärdena finns i färgkontrast och tillgänglighet, och samma regel gäller all text på en gradientbakgrund.

Mjuka hover-lägen för gradientknappar

background-image övergår inte mjukt: byter du en gradient mot en annan vid hover knäpper den till. Det finns två mjuka alternativ. Det första, som används i receptet ovan, är att måla gradienten dubbelt så bred och glida med background-position. Det andra är att lägga hover-gradienten på ett pseudoelement och tona dess opacity, vilket passar hover som byter färg 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;
}

Håll hover-förändringarna små. En gradient som skiftar lite och en skugga som fördjupas något känns lyhörd, en knapp som byter nyans helt känns instabil. Om du lägger till ständig rörelse, som ett långsamt skimmer, stäng av den för dem som föredrar reducerad rörelse.

Ramar, konturer och sekundära knappar

En gradientknapp per skärm är oftast rätt: den markerar den primära åtgärden. Sekundära åtgärder ser bättre ut i en kontur som ekar gradienten i en tunn kant. Två bakgrunder, en klippt till padding-boxen och en till border-boxen, ger en rundad gradientkontur med enfärgad mitt.

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

Inaktiva och laddande lägen

En inaktiv gradientknapp ska sluta se ut som en inbjudan. Ta bort gradienten helt i stället för att bara sänka opacity, som kan lämna en urblekt men fortfarande färgstark knapp som folk försöker trycka på. En platt, lågkontrastig grå med cursor: not-allowed läses tydligt som otillgänglig. För laddning behåller du gradienten och byter etiketten mot en snurra så att knappen inte ändrar storlek.

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

Finishen som läses som premium

• En högdager upptill. inset 0 1px 0 rgb(255 255 255 / 0.25) antyder en ljuskälla ovanför och ger ytan en svag välvning.
• En färgad skugga. En skugga i knappens egen nyans, i stället för svart, får den att glöda i stället för att sväva.
• En vinkel för allt. Använd samma gradientvinkel, som 110deg, på varje gradientkontroll.
• Varumärkesfärger, inte förinställningar. Blandningen bör komma från din palett. Gradient i varumärket förklarar varför.
• En konisk glans, sparsamt. Ett svagt koniskt lager kan ge ett metalliskt glitter, se koniska gradienter i CSS.