Buttons mit Foundation

Buttons sind praktisch, wenn du eher eine Funktion ausführen möchtest. Zu diesem Zweck verfügt Foundation über viele einfach zu verwendende Schaltflächenstile, die du an deine Anforderungen anpassen oder austauschen kannst.

Die Basics

Ein einfacher Button kann mit minimalem Aufwand erstellt werden. Da Schaltflächen für viele Zwecke verwendet werden können, ist es wichtig, den richtigen Tag zu verwenden.

  • Verwende den <a>-Tag, wenn die Schaltfläche eine Verknüpfung zu einer anderen Seite oder eine Verknüpfung zu einem Anker innerhalb einer Seite ist. Normalerweise benötigen Anker kein JavaScript, um zu funktionieren.
  • Verwende den <button>-Tag, wenn die Schaltfläche eine Aktion ausführt, die auf der aktuellen Seite etwas ändert. <button>-Elemente benötigen fast immer JavaScript, um zu funktionieren.

Füge den <button>-Elementen das Attribut type="button" hinzu, es sei denn, die Schaltfläche sendet ein Formular ab. In diesem Fall verwendest du type="submit". 

<!-- Anker (Verlinkungen) -->
<a href="#" class="button">Mehr erfahren</a>
<a href="#" class="button">Alle Features anzeigen</a>

<!-- Buttons (Aktionen) -->
<button type="button" class="success button">Speichern</button>
<button type="button" class="alert button">Löschen</button>

Mehr erfahren Alle Features anzeigen

Buttonsgröße anpassen

Zusätzliche Klassen können zur Schaltfläche hinzugefügt werden, um die Größe zu ändern. 

<a class="button tiny" href="#">Tiny</a>
<a class="button small" href="#">Small</a>
<a class="button" href="#">Normal</a>
<a class="button large" href="#">Large</a>
<a class="button expanded" href="#">Expanded</a>
<a class="button small expanded" href="#">Small Expanded</a>

Tiny Small Normal Large Expanded Small Expanded

Buttonsfarbe anpassen

Füge Farbklassen hinzu, um Schaltflächen eine zusätzliche Bedeutung zu geben. 

<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>

Primary Secondary Success Alert Warning

Buttons nur mit Rahmen

Füge die .hollow-Klasse einer Schaltfläche hinzu, um ihr einen Stil zu geben, der die Schaltfläche nicht ausfüllt. 

<button class="hollow button" href="#">Primary</button>
<button class="hollow button secondary" href="#">Secondary</button>
<button class="hollow button success" href="#">Success</button>
<button class="hollow button alert" href="#">Alert</button>
<button class="hollow button warning" href="#">Warning</button>
<button class="hollow button" href="#" disabled>Disabled</button>

Deaktivierte Buttons

Die Klasse .disabled gibt Schaltflächen ein verblasstes Aussehen. Die Klasse ist ein rein visueller Stil und deaktiviert ein Steuerelement nicht wirklich. Für <button>-Elemente kannst du das deaktiviert-Attribut hinzufügen, um es sowohl zu deaktivieren als auch zu formatieren. Wenn du eine Verknüpfung deaktivieren möchtest, solltest du das Attribut aria-disabled hinzufügen, um es für die unterstützende Technologie zu deaktivieren. 

<a class="button disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button primary" disabled>Disabled</button>
<button type="button" class="button secondary" disabled>Disabled</button>
<button type="button" class="button success" disabled>Disabled</button>
<button type="button" class="button alert" disabled>Disabled</button>
<button type="button" class="button warning" disabled>Disabled</button>

Disabled

Alternativ kannst du auch Buttons nur mit Rahmen deaktivieren. 

<a class="button hollow disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button hollow primary" disabled>Disabled</button>
<button type="button" class="button hollow secondary" disabled>Disabled</button>
<button type="button" class="button hollow success" disabled>Disabled</button>
<button type="button" class="button hollow alert" disabled>Disabled</button>
<button type="button" class="button hollow warning" disabled>Disabled</button>

Disabled

Buttons ohne Style

Füge einer Schaltfläche die Klasse .clear hinzu, um ihr einen Stil ohne Rahmen und ohne Schaltflächen-Farbe zu geben. 

<a class="clear button" href="#">Primary</a>
<a class="clear button secondary" href="#">Secondary</a>
<a class="clear button success" href="#">Success</a>
<a class="clear button alert" href="#">Alert</a>
<a class="clear button warning" href="#">Warning</a>
<a class="clear button" href="#" disabled>Disabled</a>

Primary Secondary Success Alert Warning Disabled

Dies ist besonders nützlich für sekundäre Aktionsschaltflächen. Auf diese Weise wird der richtige Abstand und die richtige Zeilenhöhe beibehalten. Ein Beispiel: 

<button class="button primary" href="#">Erste Aktion</button>
<button class="clear button" href="#">Zweite Aktion</button>

Buttons mit Dropdown-Pfeilen

Mit der .dropdown-Klasse fügst du der Schaltfläche einen Dropdown-Pfeil hinzu.

Die Dropdown-Funktionalität wird hierbei nicht automatisch hinzugefügt. Um dies Funktion hinzuzufügen, kannst du das Dropdown-Plugin von Foundation benutzen. 

<button class="dropdown button tiny">Dropdown Button</button>
<button class="dropdown button small">Dropdown Button</button>
<button class="dropdown button">Dropdown Button</button>
<button class="dropdown button large">Dropdown Button</button>
<button class="dropdown button expanded">Dropdown Button</button>

Inline-Labels und Buttons

Um zusätzlichen Text oder Steuerelemente an die linke oder rechte Seite eines Eingabefelds anzuhängen, betten Sie die Elemente in einen .input-group-Container ein und fügen Sie dann folgende Klassen den Elementen darin hinzu:

  • .input-group-field im Textfeld.
  • .input-group-label für das Textlabel.
  • .input-group-button für die Schaltfläche. Platzieren Sie den Button in diesem Wrapper.

<div class="input-group">
	<span class="input-group-label">$</span>
	<input class="input-group-field" type="number">
	<div class="input-group-button">
	<input type="submit" class="button" value="Submit">
	</div>
</div>

$

Für Screenreader zugängliche Buttons

Stelle sicher, dass der Text der Schaltfläche beschreibend ist. Wenn deine Schaltfläche aus irgendeinem Grund keinen lesbaren Text enthält (z.B. nur eine Grafik oder ein Icon), fügst du der Schaltfläche mit der Klasse .show-for-sr einen Screenreader-Text hinzu, um den Zweck des Buttons zu verdeutlichen. Die Grafik oder das Icon sollte in ein Element mit dem Attribut aria-hidden="true" umschlossen werden, um zu verhindern, dass Screenreader versuchen, die Grafik oder das Icon auszusprechen. 

<button class="button" type="button">
	<!-- Screenreader erkennen nur "schließen". -->
	<span class="show-for-sr">schließen</span>
	<!-- Benutzer, die lesen können, sehen das "X", aber nicht den Text "schließen". -->
	<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>

Buttons für Uploads

Verwende <input type="file">, um eine Dateiupload-Schaltfläche zu erstellen. Aus Sicherheitsgründen lassen die meisten Browser eine Stil-Anpassung der Dateiupload-Schaltfläche nicht zu. Um das zu umgehen, können wir ein Label als Schaltfläche formatieren und auf den <input> verweisen. Um die Eingabe ordnungsgemäß zu maskieren, wird die Klasse .show-for-sr hinzugefügt. 

<label for="exampleFileUpload" class="button">Datei hochladen</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">