3D-Button mit CSS: vom Fireworks-Export zur reinen CSS-Lösung

Ein Button mit dreidimensionaler Anmutung – heute ein paar Zeilen CSS. In der ursprünglichen Fassung dieses Beitrags aus dem Jahr 2007 begann die Anleitung dagegen mit dem Satz: „Ziehe ein Rechteck auf und verändere dessen Größe manuell auf 40 x 100 Pixel.“ Gemeint war Fireworks, ein Grafikprogramm. Wir haben den Beitrag erhalten, weil der Vergleich gut zeigt, wie sich die Arbeit verlagert hat.

Der Weg von damals

Ein plastischer Button entstand in mehreren Schritten – und der größere Teil davon fand außerhalb des Editors statt:

1. Im Grafikprogramm ein Rechteck in der Grundfarbe anlegen.
2. Einen inneren Schlagschatten mit Winkel 315° in einem helleren Ton anwenden – das ergab die Lichtkante oben links.
3. Denselben Effekt mit Winkel 135° und einem dunkleren Ton wiederholen – das ergab die Schattenkante unten rechts.
4. Einen vertikalen Farbverlauf über die Fläche legen.
5. Den Verlauf als ein Pixel breites GIF exportieren, damit er im Button horizontal gekachelt werden konnte.
6. Die Grafik hochladen und im CSS einbinden.

Das Ergebnis sah im Stylesheet so aus – inklusive der Kommentare, die damals nötig waren:

a.dreidbutton {
  color: #FFF;
  display: block;        /* damit der komplette Bereich klickbar ist */
  width: 70px;           /* leider muss fuer den IE eine Breite gesetzt werden */
  background: #9C0 url(button_bg.gif) top repeat-x;
  padding: 10px 15px;
  text-align: center;
  border-top:    #DBFF6C 2px solid;
  border-left:   #DBFF6C 2px solid;
  border-bottom: #698C00 2px solid;
  border-right:  #698C00 2px solid;
  font-family: Tahoma;
  font-size: 0.7em;
}

Die Plastizität entstand also aus zwei Quellen gleichzeitig: dem gekachelten Verlaufsbild für die Fläche und vier unterschiedlich gefärbten Rahmenlinien für die Kanten. Änderte sich die Farbe, musste die Grafik neu exportiert und alle vier Rahmenfarben angepasst werden. Ein Hover-Zustand bedeutete ein zweites Bild.

Wie es heute geht

Alles, wofür damals eine Grafik nötig war, kann CSS heute selbst. Der Verlauf, die Lichtkante, der Schatten – und der Hover-Zustand ist eine Ergänzung statt einer zweiten Datei:

.button-3d {
  background: linear-gradient(#a8dc2c, #7cb800);
  border: 0;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),  /* Lichtkante oben */
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),       /* Schattenkante unten */
    0 2px 4px rgba(0, 0, 0, 0.2);             /* Schatten nach aussen */
  color: #fff;
  cursor: pointer;
  font: 600 15px/1 system-ui, sans-serif;
  padding: 12px 24px;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.button-3d:hover {
  background: linear-gradient(#b6e83a, #8ac800);
}

.button-3d:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

Das :active-Verhalten ist dabei der eigentliche Fortschritt: Der Button senkt sich beim Klick sichtbar ab. Früher hätte das eine dritte Grafik plus JavaScript gebraucht.

Was jetzt möglich ist, aber nicht sein muss

Der ausgeprägte 3D-Look war eine Mode der 2000er. Heute überwiegen flachere Gestaltungen, bei denen ein Button vor allem durch Farbe, Größe und Position als klickbar erkennbar ist. Wenn Plastizität eingesetzt wird, dann meist dezent:

.button {
  background: #0090c8;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 12px 24px;
}
.button:hover  { background: #007fb0; }
.button:active { background: #006a94; }

Was heute dazugehört und damals fehlte

• Tastaturbedienung. Ein Button braucht einen sichtbaren Fokuszustand. :focus-visible zeigt ihn nur bei Tastaturnutzung, ohne den Mausklick zu stören.
• Das richtige Element. Was eine Aktion auslöst, gehört in ein <button>; was zu einer anderen Seite führt, in ein <a>. Der 2007er Ansatz nutzte für alles einen Link – heute ist das ein Barrierefreiheitsfehler.
• Bewegung reduzieren. Wer Animationen einsetzt, sollte prefers-reduced-motion berücksichtigen.

.button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .button-3d { transition: none; }
}

Fazit

Sechs Arbeitsschritte im Grafikprogramm, ein exportiertes GIF und vier handgesetzte Rahmenfarben – dafür genügen heute ein Verlauf und zwei innere Schatten. Die Technik ist damit kein Thema mehr. Interessanter ist, dass die Gestaltung inzwischen in die andere Richtung geht: Buttons müssen nicht mehr plastisch wirken, um als Buttons erkannt zu werden.

Bei der Gestaltung von Bedienelementen und Designsystemen unterstützen wir Sie als Webdesign-Agentur gerne.