HTML-Schaltfläche als Link verwenden

Welche HTML-Schaltfläche richtig ist, hängt vom Ergebnis ab. Für Navigation verwenden Sie ein <a>-Element mit href und gestalten es mit CSS wie eine Schaltfläche. Verwenden Sie <button> für eine Aktion und einen Submit-Button, wenn Formulardaten gesendet werden. Verschachteln Sie niemals <button> oder <input> in einem <a>: Beide sind interaktiv und erzeugen widersprüchliche Semantik sowie problematisches Tastaturverhalten.

Wählen Sie das Element nach dem gewünschten Ergebnis

Ein Anchor ist richtig, wenn die Aktivierung die Adresse ändert, ein Dokument öffnet, eine Datei herunterlädt oder zu einer anderen Seite führt. href stellt ein echtes Ziel bereit. Dadurch können Nutzer den Link in einem neuen Tab öffnen, die Adresse kopieren, ihn als Lesezeichen speichern und ihn per Tastatur erreichen.

Ein <button type="button"> ist für Aktionen gedacht, die die aktuelle Seite ändern, etwa ein Dialogfenster öffnen, ein Panel umschalten oder ein Skript ausführen. Ein Button ist nicht automatisch ein Link, nur weil er rechteckig aussieht. Rolle und Verhalten müssen übereinstimmen.

Ein <a>-Element für die Navigation wie eine Schaltfläche gestalten

Dies ist die empfohlene Lösung für eine Schaltfläche, die nur navigiert. Lassen Sie das Ziel in href, verwenden Sie aussagekräftigen Linktext und zeigen Sie den Fokus sichtbar an. Ersetzen Sie /docs/ durch Ihr Ziel.

<a class="button-link" href="/docs/">Open the documentation</a>

.button-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 0.35rem;
  background: #1769aa;
  color: #fff;
  text-decoration: none;
}

.button-link:hover {
  background: #0d4f80;
}

.button-link:focus-visible {
  outline: 3px solid #f5b700;
  outline-offset: 2px;
}

Das Ergebnis sieht wie ein Button aus, bleibt aber ein Link. Enter aktiviert ihn und der Browser kennt sein Ziel. Wenn ein Link in einem neuen Tab geöffnet wird, machen Sie das im Linktext deutlich:

<a href="https://example.com/docs" target="_blank" rel="noopener">
  Open the documentation (new tab)
</a>

Verwenden Sie nicht href="#" oder href="javascript:void(0)" als künstlichen Button. Diese Werte beschreiben kein echtes Ziel und können Scrollen oder Lesezeichen unerwartet beeinflussen. Wenn keine Navigation stattfindet, verwenden Sie stattdessen einen echten Button.

Die URL in href kann relativ, absolut, ein Fragment oder eine andere vom Browser adressierbare URL sein. Der Linktext sollte das Ziel auch ohne den umgebenden Absatz erklären. CSS ändert nur die Darstellung; ein gestalteter Link behält seine Browserfunktionen und ist meist robuster als ein Fake-Button.

<button> mit JavaScript nur für eine echte Button-Aktion verwenden

Ein Button kann notwendig sein, wenn vor der Navigation noch eine Aktion ausgeführt oder ein Zustand geprüft wird. Geben Sie den Typ ausdrücklich an und registrieren Sie einen Listener mit addEventListener. window.location.assign() navigiert anschließend.

<button type="button" id="docs-button">Open the documentation</button>

<script>
  document.querySelector("#docs-button").addEventListener("click", () => {
    window.location.assign("https://example.com/docs");
  });
</script>

Dieses Beispiel reagiert auf Maus, Enter und Leertaste, benötigt aber JavaScript. Für gewöhnliche Navigation ist der Anchor besser, weil er auch ohne JavaScript nutzbar bleibt. Ein Inline-onclick ist möglich, sollte in größeren Anwendungen aber durch ein Modul ersetzt werden. Eine leere oder fehlerhafte Ziel-URL ist ein Grenzfall; validieren Sie dynamische Werte vor assign().

Ein Formular verwenden, wenn Daten gesendet werden

Die Formularvariante ist sinnvoll, wenn ein Server Formulardaten empfängt. Setzen Sie das Ziel in action und verwenden Sie einen Submit-Control. Das ist eine Formularübertragung und nicht bloß eine Linknavigation.

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" name="q" type="search">
  <button type="submit">Search</button>
</form>

Die Eingabe CSS button kann beispielsweise zu /search?q=CSS+button führen, abhängig von der normalen Formularcodierung. Verwenden Sie kein leeres Formular nur für die Buttonoptik. Für einzelne Submit-Ziele kann formaction an einem type="submit"-Button verwendet werden.

Wenn ein Projekt die ältere wertbasierte Schreibweise benötigt, ist auch <input type="submit"> gültig:

<form action="/docs/" method="get">
  <input type="submit" value="Open the documentation">
</form>

value ist die sichtbare Beschriftung. Verschachteln Sie das Input nicht in einem Anchor. <input type="button"> navigiert und sendet nichts von selbst; dafür wäre ein Skript erforderlich.

Eine Schaltfläche reparieren, die keinen Link öffnet

• Für Navigation muss das Markup ein <a href="..."> sein, auch wenn CSS wie ein Button aussieht.
• In einem Formular setzt type="button" eine nicht sendende Aktion fest. Ohne Typ wird ein Button normalerweise zum Submit-Button und kann Daten senden oder die Seite neu laden.
• Bei einem JavaScript-Button prüfen Sie Konsole, Selektor und Script-Ladevorgang. Ohne JavaScript läuft der Handler nicht.
• Behalten Sie den sichtbaren :focus-visible-Zustand bei und entfernen Sie den Browser-Fokus nicht ohne Ersatz.
• Kombinieren Sie bei einem normalen Link keinen Anchor mit einem verschachtelten <button> oder <input>.

Kurz gesagt: Verwenden Sie <a href="..."> für Navigation, <button type="button"> für Aktionen und einen Submit-Button im Formular für gesendete Daten. So erhalten Browser und assistive Technologien die erwartete Semantik.