Components Button CSS Framework

Components, Button, CSS und Framework gehören hier zusammen, weil Buttons überall klicken lassen.

Buttons sind die erste Component, die man spürt. Sie müssen sich gut anfühlen, klar aussehen 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 du Base und Content ordentlich hast, muss der Button nicht mehr gegen das restliche Layout 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>

Button Varianten und Zustände

Ein Framework trennt meistens Varianten: Standard, Primary, Ghost. Dazu kommt Fokus für Tastatur, und idealerweise ein Disabled-Zustand. Es ist gut, das in CSS klar zu halten, statt später überall Inline-Styles zu verteilen. Kleine Details wie ein konsistenter Hover machen viel aus, ohne laut zu sein. Ich mag es, wenn das unauffällig wirkt, aber stabil bleibt.

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

Komponenten bauen auf der Struktur auf

Components sind die sichtbaren Teile, aber sie sollten nicht alles alleine lösen. Ein Button sitzt in einer Card, in einem Grid, neben Text. Wenn das Framework darunter ordentlich ist, bleibt der Button klein und verständlich. Wenn nicht, wird er zu einem Monster aus Ausnahmen, und das will wirklich keiner. Ich hab das schon so oft gesehen, dass man es fast riechen kann, wenn ein Projekt anfängt zu kippen, dann ist alles „nur noch schnell“.