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>
<!-- Absenden Button --> <button type="submit" class="btn btn-default">Absenden</button> <!-- Zurücksetzen Button --> <button type="reset" class="btn btn-default">Zurücksetzen</button>
<!-- 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>
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>