<button>

Zuletzt aktualisiert am 3. Juli 2026

Das <button> Element erstellt einen anklickbaren Button, der verschiedene Aktionen auslösen kann. Im Gegensatz zu <input type="button"> kannst du innerhalb eines Buttons beliebigen HTML-Content platzieren, wie Text, Bilder oder Icons. Buttons sind essentiell für Formulare und interaktive Webseiten.

Grundlagen

• Buttons können Formulare absenden, zurücksetzen oder JavaScript-Funktionen ausführen
• Du kannst HTML-Elemente wie Icons, Bilder oder formatierten Text im Button verwenden
• Das type Attribut bestimmt das Verhalten des Buttons
• Standardmäßig hat ein Button den Typ submit, wenn kein type angegeben ist
• Buttons sind vollständig tastaturzugänglich und können mit Enter oder Space aktiviert werden
• Mit dem disabled Attribut kannst du Buttons deaktivieren

Syntax

<button>Klick mich</button>

Attribute

Mit popovertarget verbindest du einen Button deklarativ mit einem Popover: Ein Klick öffnet oder schließt das verknüpfte Element, ganz ohne JavaScript. Über popovertargetaction legst du fest, ob der Klick das Popover öffnet, schließt oder umschaltet. Wie das Zusammenspiel funktioniert, liest du im Artikel Das popover-Attribut.

Beispiele

Submit-Button in einem Formular

<form action="/submit" method="post">
  <label>
    Name:
    <input type="text" name="username">
  </label>
  <button type="submit">Absenden</button>
</form>

Button mit JavaScript-Aktion

<button type="button" onclick="showMessage()">
  Klick mich
</button>

<script>
function showMessage() {
  alert('Button wurde geklickt!');
}
</script>

Verschiedene Button-Typen

<form>
  <input type="text" name="email" placeholder="Email">

  <!-- Sendet das Formular ab -->
  <button type="submit">Submit</button>

  <!-- Führt nur aus, was JavaScript definiert -->
  <button type="button">Button</button>

  <!-- Setzt alle Formularfelder zurück -->
  <button type="reset">Reset</button>
</form>

Button mit Icon und Text

<button type="button">
  <svg width="20" height="20" viewBox="0 0 24 24">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
  Weiter
</button>

Deaktivierter Button

<button type="button">Aktiv</button>
<button type="button" disabled>Deaktiviert</button>

Button außerhalb eines Formulars

<form id="myForm">
  <input type="text" name="username">
</form>

<!-- Button ist außerhalb, aber mit dem Formular verbunden -->
<button type="submit" form="myForm">
  Formular absenden
</button>

Button mit verschiedenen Actions

<form action="/default">
  <input type="text" name="data">

  <!-- Jeder Button sendet an eine andere URL -->
  <button type="submit" formaction="/save">
    Speichern
  </button>

  <button type="submit" formaction="/preview" formtarget="_blank">
    Vorschau
  </button>

  <button type="submit" formaction="/delete" formmethod="delete">
    Löschen
  </button>
</form>

Barrierefreiheit

Buttons sind von Natur aus barrierefrei, aber du solltest einige Dinge beachten. Der Button-Text sollte den Zweck des Buttons klar beschreiben. Vermeide generische Texte wie “Klick hier” oder “Mehr”.

Tastatur-Navigation funktioniert automatisch. Nutzer können mit der Tab-Taste zum Button navigieren und ihn mit Enter oder der Leertaste aktivieren. Der Fokus-Zustand sollte visuell erkennbar sein, damit Tastatur-Nutzer wissen, wo sie sich befinden.

Bei deaktivierten Buttons ist zu beachten, dass sie keinen Fokus erhalten und für Screenreader als nicht interaktiv gekennzeichnet werden. Überlege dir, ob du stattdessen einen aktivierten Button mit einer Fehlermeldung zeigen solltest, damit Nutzer verstehen, warum eine Aktion nicht möglich ist.

Icon-Buttons ohne sichtbaren Text brauchen ein aria-label Attribut, damit Screenreader-Nutzer den Zweck verstehen. Bei Buttons, die einen Zustand ändern, wie zum Beispiel ein Toggle-Button, solltest du aria-pressed verwenden.

Wenn ein Button eine Aktion auslöst, die Zeit braucht, solltest du visuelles Feedback geben. Eine Ladeanimation oder ein deaktivierter Zustand verhindert, dass Nutzer den Button mehrfach klicken.

Häufige Fehler

div oder span als Button: Ein häufiger Fehler ist es, <div> oder <span> Elemente mit Click-Handlern als Buttons zu verwenden. Diese Elemente sind nicht tastaturzugänglich und werden von Screenreadern nicht als Buttons erkannt. Verwende immer das echte <button> Element für klickbare Aktionen. Falls du unbedingt ein anderes Element verwenden musst, füge role="button" und tabindex="0" hinzu und implementiere Tastatur-Handler für Enter und Space.

Fehlender type: Wenn du keinen type angibst, ist der Standard submit. Das führt dazu, dass ein Button in einem Formular das Formular absendet, auch wenn das nicht beabsichtigt war. Wenn du einen Button für JavaScript-Aktionen verwendest, setze immer type="button" explizit. Das ist einer der häufigsten Bugs bei Formularen.

Leerer Button-Text: Buttons ohne Text oder aria-label sind für Screenreader-Nutzer nutzlos. Bei Icon-Buttons musst du ein aria-label hinzufügen. Auch wenn der Text visuell versteckt ist, sollte er im HTML existieren oder über aria-label bereitgestellt werden.

Nested Buttons: Du kannst keine Buttons ineinander verschachteln oder einen Button in einem Link platzieren. Das ist ungültiges HTML und führt zu unerwartetem Verhalten. Wenn du komplexe interaktive Elemente brauchst, überlege dir die Struktur genau oder verwende JavaScript-Event-Handler auf dem äußeren Element.

Multiple Submit-Buttons ohne value/name: Wenn du mehrere Submit-Buttons in einem Formular hast, solltest du ihnen unterschiedliche name und value Attribute geben. So kannst du im Backend erkennen, welcher Button geklickt wurde. Ohne diese Attribute weißt du nicht, welche Aktion der Nutzer ausgewählt hat.

Button in einem Link: Manchmal sieht man Buttons innerhalb von <a> Tags. Das ist semantisch falsch und führt zu Problemen. Ein Link navigiert zu einer URL, ein Button führt eine Aktion aus. Entscheide dich für eines von beiden. Wenn du einen Link wie einen Button stylen willst, ist das kein Problem, aber verschachtle sie nicht.

Fehlende Hover- und Focus-States: Viele Designer vergessen die Zustände für Hover, Focus und Active. Diese sind wichtig für das Nutzer-Feedback und die Barrierefreiheit. Definiere immer alle interaktiven Zustände in deinem CSS.

Browser-Kompatibilität

Das button-Element wird von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

Interaktive Elemente wie Buttons funktionieren in E-Mails nicht. Die meisten E-Mail-Clients entfernen JavaScript und form-Elemente. Verwende stattdessen gestylte Links, die wie Buttons aussehen.

Verwandte Elemente