Farbverlauf-Buttons in CSS, die hochwertig wirken

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.

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

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.

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

Mehr zur Mathematik und zu den Schwellenwerten steht in Farbkontrast und Barrierefreiheit, und dieselbe Regel gilt für jeden Text auf einem Farbverlaufshintergrund.

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.

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

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

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

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.

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

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.
• Ein conic-Schimmer, sparsam. Eine zarte conic-Ebene kann einen metallischen Glanz hinzufügen; siehe CSS conic gradients.