Buttons

Zur Erstellung von Buttons bietet HTML eine Vielzahl von Möglichkeiten. Buttons sollten je nach Einsatzzweck durch die Tags <button>, <input type="submit"> oder <input type="reset"> erzeugt werden. Die CSS-Klasse .btn sorgt anschließend für das Grundgerüst. Über eine zweite CSS-Klasse wird dann das Aussehen des Buttons bestimmt.

Je nach Einsatzgebiet stehen auch hier unterschiedliche Farben für verschiedene Bedeutungen bereit. Soll ein Button inaktiv geschaltet werden, wird das Attribut disabled angewendet:

<!-- Standard Button -->
<button type="button" class="btn btn-default">Standard</button>

<!-- Marke Button -->
<button type="button" class="btn btn-brand">Marke</button>

<!-- Inaktiv Button -->
<button type="button" class="btn btn-clean">Inaktiv</button>

<!-- Inaktiv Button -->
<button type="button" class="btn btn-default" disabled>Inaktiv</button>

Achtung: Die CSS-Klasse .btn darf nie alleine stehen.

Anmerkung: Das Anwenden der CSS-Klasse .btn auf einen <a> Link ist zwar möglich, sollte aufgrund der Konsistenz jedoch vermieden werden. Falls dies nicht möglich ist, muss das <a>-Tag mit dem Attribut role="button" versehen werden.

Tipp: Das Button-Verhalten kann auf viele Elemente angewendet werden. So natürlich auch auf die unterschiedlichen Button-Typen wie type="submit" oder type="reset".

<!-- Absenden Button -->
<button type="submit" class="btn btn-default">Absenden</button>

<!-- Zurücksetzen Button -->
<button type="reset" class="btn btn-default">Zurücksetzen</button>

Anmerkung: Der grüne und rote Button werden primär für die Kernfunktionalitäten „Anrufen“ bzw. „Anruf beenden“ verwendet.

<!-- Anrufen Button -->
<button type="button" class="btn btn-positive">Anrufen</button>

<!-- Anruf beenden Button -->
<button type="button" class="btn btn-negative">Anruf beenden</button>

Größen

Für Buttons stehen drei verschiedene Größen zur Verfügung. Die CSS-Klasse .btn-small lässt den Button kleiner, die CSS-Klasse .btn-large größer erscheinen:

<button type="button" class="btn btn-default btn-small">Klein</button>
<button type="button" class="btn btn-default">Normal</button>
<button type="button" class="btn btn-default btn-large">Groß</button>

Breiten

Je nach Layout kann es sinnvoll sein, Buttons schmal oder extrem weit darzustellen. Hierfür sind die CSS-Klassen .btn-minimal und .btn-block vorgesehen.

Ein Button mit der Klasse .btn-block passt sich zu 100% in sein Elternelement ein:

<button type="button" class="btn btn-default btn-minimal">Minimal</button>
<button type="button" class="btn btn-default">Normal</button>
<button type="button" class="btn btn-default btn-block">Block</button>

Icon Buttons

Für Buttons, die nur ein Icon enthalten, ist die CSS-Klasse .btn-icon vorgesehen. Sie lässt den Button schmaler erscheinen. Buttons, die aus Icon und Text bestehen, benötigen keine zusätzliche Auszeichnung:

<!-- Icon-Button - benötigt unbedingt ein Title-Attribut -->
<button class="btn btn-default btn-icon" title="Synchronisieren">
  <i class="icon icon-synchronize" aria-hidden="true"></i>
</button>
<button class="btn btn-default">
  <i class="icon icon-synchronize" aria-hidden="true"></i>Synchronisieren
</button>
<button class="btn btn-default">
  Synchronisieren<i class="icon icon-right icon-synchronize" aria-hidden="true"></i>
</button>

Anmerkung Barrierefreiheit: Da das Icon des Icon-Buttons mit dem aria-hidden-Attribute vor Unterstützungstechnologien versteckt wird sollte der Button dringen durch das Anwenden des title-Attributes beschrieben werden.

Button-Sectioned

Buttons und Pager lassen sich mit Hilfe der CSS-Klasse btn-sectioned zu einer Leiste von Benutzerelementen zusammenfassen.

<div class="btn-sectioned">
    <button class="btn btn-default">Regular</button>
    <button class="btn btn-default">Regular</button>
    <button class="btn btn-default">Regular</button>
</div>

...

<div class="btn-sectioned">
    <button class="btn btn-default" title="Anhänge"><i class="icon icon-attachment" aria-hidden="true"></i>Icon</button>
    <button class="btn btn-default" title="Einstellungen"><i class="icon icon-settings" aria-hidden="true"></i>Icon</button>
    <button class="btn btn-default" title="Kontextmenü"><i class="icon icon-context-menu" aria-hidden="true"></i>Icon</button>
</div>

...

<div class="btn-sectioned">
    <button class="btn btn-default"><i class="icon icon-attachment" aria-hidden="true"></i>Icon</button>
    <button class="btn btn-default"><i class="icon icon-bookmark" aria-hidden="true"></i>Icon</button>
    <button class="btn btn-default"><i class="icon icon-context-menu" aria-hidden="true"></i>Icon</button>
</div>