BaseGUI.de

Buttons sind die Component, die man sofort spürt. Sie müssen klar aussehen, schnell erkennbar sein und in vielen Situationen funktionieren: als Link, als Submit, als sekundäre Aktion. In einem Framework ist ein Button nicht nur Farbe, sondern eine definierte Oberfläche mit Abstand, Radius, Hover-Zustand und sinnvoller Typografie. Wenn Base und Content sauber sind, muss der Button nicht gegen den Rest kämpfen.

<a class="btn" href="content.html">Zur Content-Seite</a>
<button class="btn primary" type="button">Primär Aktion</button>
<button class="btn ghost" type="button">Unauffällig</button>

Varianten und Zustände

Ein Framework trennt meistens Varianten: Standard, Primary, Ghost. Dazu kommen Fokus für Tastatur und ein Disabled-Zustand. Das Wichtigste ist Konsistenz. Du willst nicht, dass ein Button in einem Formular anders reagiert als in einer Karte. Das klingt klein, aber solche Details entscheiden darüber, ob eine Oberfläche „fertig“ wirkt oder wie ein Baukasten. Und wenn du später anfängst, überall Inline-Styles zu setzen, ist das der Anfang vom Ende, weil niemand mehr weiß, welcher Button wirklich der Standard ist.

.btn{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #a2a9b1;
  background:#fff;
}
.btn.primary{ background:#36c; color:#fff; border-color:transparent; }

Buttons bauen auf Objects auf. Sie leben im Grid, in Cards, neben Text, in Tabellen. Deshalb ist es so hilfreich, wenn Layout und Content vorher gelöst sind. Dann bleibt der Button-Code klein und verständlich. Wenn nicht, endet es oft damit, dass der Button plötzlich Layout-Probleme kompensiert. Das ist wie eine Tür, die nur schließt, weil man dagegen drückt. Funktioniert kurz, aber ist keine Lösung. Ich hab das schon so oft gesehen, dass ich bei zu großen Button-CSS Regeln direkt skeptisch werde.