# Farbverlauf-Buttons in CSS, die hochwertig wirken

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

Die meisten Verlaufs-Buttons wirken aus denselben paar Gründen billig: zu viele Farbtöne, ein Hover, der springt, und Text, der im hellen Ende verschwindet. Hier das Rezept, das alle drei vermeidet.

## The short version

- Ein hochwertiger Verlaufs-Button mischt meist zwei benachbarte Farbtöne mit ähnlicher Helligkeit, mit einem zarten Glanzlicht entlang der Oberkante.
- Farbverläufe lassen sich nicht überblenden, ein flüssiger Hover verschiebt daher einen übergroßen Verlauf mit background-position oder blendet eine Überlagerung mit opacity ein.
- Weißer Text auf einem Verlaufs-Button braucht mindestens 4,5:1 Kontrast zum hellsten Teil des Verlaufs, nicht nur zum dunkelsten.
- Ein Gedrückt-Zustand kann so einfach sein, wie den Button einen Pixel nach unten zu schieben und seinen äußeren Schatten zu entfernen.
- Verlaufs-Buttons wirken am besten als die eine primäre Aktion auf einem Bildschirm, während sekundäre Aktionen flach oder als Kontur bleiben.

**CSS für Verlaufs-Buttons**, die hochwertig wirken, läuft auf Zurückhaltung hinaus. Wähle zwei benachbarte Farbtöne mit ähnlicher Helligkeit, füge ein zartes Glanzlicht an der Oberkante hinzu, verschiebe den Verlauf beim Hover, statt ihn auszutauschen, und prüfe, ob der Text gegen den hellsten Teil lesbar ist. Die laute Variante mit Regenbogenrand ist leicht gemacht und leicht als Vorlage erkennbar; die leise Variante lässt ein Produkt fertig wirken.

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

Das ganze Rezept: ein doppelt breiter Verlauf, der beim Hover gleitet, ein Glanzlicht oben, ein getönter Schatten und ein Gedrückt-Zustand.

Indigo zu Lila und zurück: `linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5)`

Der Verlauf des Buttons in voller Breite. In Ruhe siehst du die linke Hälfte; beim Hover gleitet er zur rechten Hälfte, die wieder in Indigo endet.

## Dezente gegen laute Verlaufs-Buttons

Ein dezenter Button nutzt zwei Farbtöne, die auf dem Farbkreis nebeneinanderliegen, etwa Indigo und Lila, sodass der Verlauf als Tiefe statt als Dekoration liest. Ein lauter Button überspannt weit entfernte Farbtöne und wird zum farbigsten Element der Seite. Laut kann für einen einzelnen Launch-Moment oder eine verspielte Marke funktionieren; dezent funktioniert überall sonst. Jede Palette unten hält weißen Text an beiden Enden über 4,5:1.

- Dezent: Indigo bis Lila: `linear-gradient(110deg, #4f46e5, #9333ea)`
- Dezent: Königsblau bis Tiefpetrol: `linear-gradient(110deg, #1d4ed8, #0e7490)`
- Warm: Karmin bis Brandorange: `linear-gradient(110deg, #be123c, #c2410c)`
- Kräftig: Lila bis Magenta: `linear-gradient(110deg, #9333ea, #c026d3)`

Button-Verläufe, die weißen Text lesbar halten. Gemessene Stopps: 6,3 und 5,4, 6,7 und 5,4, 6,3 und 5,2, 5,4 und 4,7 zu 1.

## Textkontrast auf Verlaufs-Buttons

Ein Kontrastprüfer nimmt eine Hintergrundfarbe, ein Button hat aber eine Spanne. Prüfe die Textfarbe gegen den hellsten Stopp, denn dort ist die Beschriftung am schwächsten. Button-Text in normaler Größe braucht nach WCAG 4,5:1, und der [Kontrastprüfer von WebAIM](https://webaim.org/resources/contrastchecker/) macht jeden Stopp zur schnellen Prüfung. Der übliche Fehler ist ein warmer Verlauf, der in Gelb oder hellem Orange endet, das energiegeladen aussieht und die halbe Beschriftung unlesbar lässt.

### Vermeiden

- Orange zu Gelb, #f97316 zu #fbbf24, unter weißem Text: 2,8 und 1,7 zu 1
- Helle Pastellverläufe mit weißen Beschriftungen
- Nur die Farbe hinter dem ersten Buchstaben prüfen
- Dünne, leichte Schriftschnitte auf einem unruhigen Verlauf

### Besser

- Tiefe Stopps mit ähnlicher Helligkeit, wie Karmin zu Brandorange
- Stattdessen dunkler Text auf Pastellverläufen
- Den hellsten Stopp und die Mitte prüfen
- Schnitte ab 600 für Beschriftungen auf Verläufen

Mehr zur Mathematik und zu den Schwellenwerten steht in [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility), und dieselbe Regel gilt für jeden [Text auf einem Farbverlaufshintergrund](https://gradiently.design/de/guide/text-on-gradient).

## Flüssige Hover-Zustände für Verlaufs-Buttons

`background-image` lässt sich nicht überblenden: Tauschst du beim Hover einen Verlauf gegen einen anderen, springt er. Es gibt zwei flüssige Alternativen. Die erste, im Rezept oben genutzt, ist, den Verlauf doppelt so breit zu malen und `background-position` gleiten zu lassen. Die zweite ist, den Hover-Verlauf auf ein Pseudoelement zu legen und seine Opacity einzublenden, was zu Hovers passt, die die Farbe komplett ändern.

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

Ein Hover per Überblendung. Opacity lässt sich günstig animieren, und die Beschriftung bleibt über der Überlagerung.

Halte Hover-Änderungen klein. Ein Verlauf, der sich ein wenig verschiebt, und ein Schatten, der leicht tiefer wird, wirken reaktionsfreudig; ein Button, der seinen Farbton komplett wechselt, wirkt instabil. Fügst du kontinuierliche Bewegung hinzu, etwa ein langsames Schimmern, schalte sie für Menschen ab, die [reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) bevorzugen.

## Rahmen, Konturen und sekundäre Buttons

Ein Verlaufs-Button pro Bildschirm ist meist richtig: Er markiert die primäre Aktion. Sekundäre Aktionen sehen besser in einem Konturstil aus, der den Verlauf in einer dünnen Kante aufgreift. Zwei Hintergründe, einer auf die Padding-Box und einer auf die Border-Box begrenzt, ergeben eine abgerundete Verlaufskontur mit einfarbiger Mitte.

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

Eine Verlaufskontur für sekundäre Aktionen. [CSS-Farbverlaufsrahmen](https://gradiently.design/de/guide/css-gradient-border) behandelt transparente und animierte Versionen.

## Deaktivierte und ladende Zustände

Ein deaktivierter Verlaufs-Button sollte nicht mehr wie eine Einladung aussehen. Entferne den Verlauf ganz, statt nur die Opacity zu senken, was einen verblassten, aber noch bunten Button zurücklassen kann, den Menschen zu drücken versuchen. Ein flaches, kontrastarmes Grau mit `cursor: not-allowed` liest sich klar als nicht verfügbar. Behalte beim Laden den Verlauf und tausche die Beschriftung gegen einen Spinner, damit der Button seine Größe nicht ändert.

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

Deaktiviert heißt flach. Der Verlauf kehrt nur zurück, wenn die Aktion verfügbar ist.

## Feinschliff, der hochwertig wirkt

- **Ein Glanzlicht oben.** `inset 0 1px 0 rgb(255 255 255 / 0.25)` deutet eine Lichtquelle darüber an und gibt der Fläche eine leichte Wölbung.
- **Ein getönter Schatten.** Ein Schatten im eigenen Farbton des Buttons statt in Schwarz lässt ihn leuchten, statt zu schweben.
- **Ein Winkel für alles.** Nutze denselben Verlaufswinkel, etwa 110deg, bei jedem Verlaufs-Element.
- **Markenfarben statt Voreinstellungen.** Die Mischung sollte aus deiner Palette stammen; warum, erklärt [Branding mit Farbverläufen](https://gradiently.design/de/guide/gradient-branding).
- **Ein conic-Schimmer, sparsam.** Eine zarte conic-Ebene kann einen metallischen Glanz hinzufügen; siehe [CSS conic gradients](https://gradiently.design/de/guide/css-conic-gradient).

## FAQ

### Wie mache ich einen Verlaufs-Button in CSS?

Setze `background-image: linear-gradient(110deg, #4f46e5, #9333ea)` auf den Button, mit weißem Text, runden Ecken und einer einfarbigen `background-color` als Ausweichfarbe.

### Wie animiere ich einen Verlaufs-Button beim Hover?

Mache den Verlauf mit `background-size: 200% 100%` doppelt so breit und blende `background-position` über, oder blende ein Pseudoelement mit dem Hover-Verlauf ein.

### Warum ändert sich mein Verlaufs-Button beim Hover sofort?

Browser können nicht zwischen zwei `background-image`-Werten überblenden. Verschiebe oder blende den Verlauf ein, statt ihn zu ersetzen.

### Welche Textfarbe funktioniert auf einem Verlaufs-Button?

Diejenige, die mindestens 4,5:1 Kontrast zum hellsten Teil des Verlaufs erreicht. Weiß funktioniert auf tiefen Verläufen; dunkler Text passt zu Pastelltönen.

### Sollte jeder Button einen Farbverlauf haben?

Nein. Nutze einen Farbverlauf für die eine primäre Aktion auf einem Bildschirm und halte sekundäre Buttons flach oder als Kontur, damit der wichtige hervorsticht.