Ausführbare HTML-Docs: Button als Link

Q: Wie mache ich in HTML einen Button, der auf eine andere Seite verlinkt?

Nimm einen Link und style ihn wie einen Button: Sign up mit CSS für Innenabstand, Hintergrund, abgerundete Ecken und text-decoration: none. Er sieht aus wie ein Button und verhält sich wie ein Link, und genau das ist er auch.

Q: Hat ein button ein href-Attribut?

Nein. hat kein href. Um den Browser zu einer URL zu schicken, nimm oder setz den Button in ein mit einem action (ein formaction-Attribut am Button überschreibt es).

Q: Wie deaktiviere ich einen Link, der wie ein Button aussieht?

Links haben kein disabled-Attribut. Entferne das href, damit er kein Link mehr ist, füg aria-disabled="true" hinzu und style ihn als deaktiviert. Setz das href wieder ein, wenn er wieder funktionieren soll.

So baust du einen Button, der auf eine Seite verlinkt

Schreib einen normalen Link, <a href>, und style ihn mit CSS so, dass er wie ein Button aussieht. Er führt zur Seite wie jeder Link und behält alle Link-Funktionen: in neuem Tab öffnen, Link-Adresse kopieren und die URL-Vorschau beim Überfahren.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }
    .btn:hover { background: #1d4ed8; }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <a class="btn" href="https://developer.mozilla.org/">Read the docs</a>
</body>
</html>

Die Regeln, die aus einem Link einen Button machen:

display: inline-block lässt den Innenabstand den Kasten aufweiten und hält ihn in der Textzeile.
text-decoration: none entfernt die Unterstreichung.
color und background ersetzen die blaue Linkfarbe.
:focus-visible gibt Tastaturnutzern einen deutlichen Fokusrahmen.

Dieselbe Klasse funktioniert an einem <button>, sodass der Absende-Button eines Formulars und ein Link auf eine andere Seite identisch aussehen können, während jeder seine eigene Aufgabe erledigt.

Button oder Link: welches Element du nimmst

Die Frage ist, was beim Klick passiert, nicht wie es aussieht.

Ein Klick darauf	Nimm	Beispiele
Führt zu einer anderen URL	`<a href>`	Registrieren, Mehr lesen, Preise ansehen, Herunterladen
Ändert etwas auf dieser Seite	`<button type="button">`	Menü öffnen, Abspielen, In den Warenkorb, Passwort anzeigen
Sendet ein Formular ab	`<button type="submit">`	Anmelden, Suchen, Speichern

Ein Link, der als „Link“ angesagt wird, und ein Button, der als „Button“ angesagt wird, sagen Screenreader-Nutzern, was passieren wird. Auch ihr Tastaturverhalten unterscheidet sich: Enter löst beide aus, die Leertaste aber nur Buttons (bei einem Link scrollt die Leertaste die Seite). Das button-Element selbst erklärt die Seite zum HTML Button.

Warum kein Button in einem Link

Das ist das Muster, das die meisten zuerst ausprobieren:

<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>

<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>

Der HTML-Standard verbietet beides: <a> und <button> dürfen keine interaktiven Elemente enthalten. In der Praxis bekommt die Tastatur zwei Tab-Stopps für ein Bedienelement, ein Screenreader sagt vielleicht „Link, Button, Sign up“ an, und ob ein Klick dem Link folgt, hängt vom Browser ab. Entscheide dich für ein Element.

Warum kein onclick mit location.href

Der andere häufige Umweg ist ein Button, der die URL per JavaScript setzt. Er sieht genauso aus wie ein Link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link vs onclick</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      background: #16a34a;
      color: #fff;
      font: inherit;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Real link</a>
  <button class="btn" type="button"
    onclick="window.open('https://example.com/')">Button with onclick</button>
  <p>Hover both, then right-click both.</p>
</body>
</html>

(Das Beispiel nimmt window.open, weil die Vorschau nicht wegnavigieren darf; der übliche Code ist location.href = '...'.) Fahr mit der Maus über beide und klick sie mit rechts an: Nur der echte Link zeigt seine URL und bietet „Link in neuem Tab öffnen“ und „Link-Adresse kopieren“ an. Der Button bekommt außerdem weder Strg+Klick noch Mittelklick, der Browser markiert ihn nicht als besucht, und Suchmaschinen folgen ihm nicht wie einem Link. Wenn das Ziel eine URL ist, schreib <a href>.

Ein Formular-Button, der eine URL öffnet

Es gibt einen Fall, in dem ein <button>, der auf eine andere Seite führt, richtig ist: wenn er Daten mitschickt. Ein Suchfeld ist das klassische Beispiel. Das action des Formulars ist die URL, und method="get" hängt die Felder an den Query-String:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Search form</title>
</head>
<body>
  <form action="https://duckduckgo.com/" method="get">
    <label>Search <input type="search" name="q" value="html button link" required></label>
    <button type="submit">Search</button>
    <button type="submit" formaction="https://www.bing.com/search">Search with Bing</button>
  </form>
</body>
</html>

Drück auf Search: Auf einer echten Seite würde der Browser zu https://duckduckgo.com/?q=html+button+link gehen. Die Vorschau zeigt stattdessen die Daten an, statt die Seite zu verlassen. formaction schickt dasselbe Formular über den zweiten Button an eine andere URL.

Deaktivierte Link-Buttons

Links haben kein disabled-Attribut; <a disabled> bewirkt nichts. Um einen Link-Button abzuschalten, entferne sein href (ein <a> ohne href ist kein Link und kann weder angeklickt noch fokussiert werden) und kennzeichne ihn mit aria-disabled="true", damit der Style und Screenreader es beide wissen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled link button</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
    }
    .btn[aria-disabled="true"] {
      background: #e5e7eb;
      color: #6b7280;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Continue</a>
  <a class="btn" aria-disabled="true">Continue</a>
</body>
</html>

Drück in der Vorschau Tab: Der Fokus landet nur auf dem ersten Button. Manche Websites behalten das href und setzen stattdessen pointer-events: none, aber das blockiert nur die Maus. Der Link bleibt mit Tab erreichbar, und Enter folgt ihm trotzdem.

Buttons für neuen Tab und Download

Jedes Link-Attribut funktioniert weiter an einem Link, der als Button gestylt ist:

<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>

Noch ein Grund für <a>: Ein <button> hat weder download noch target. Mehr zu target unter Link in neuem Tab öffnen.

Häufige Fehler

Ein Button in einem Link oder ein Link in einem Button. Ungültiges HTML mit unvorhersehbarem Verhalten.
<button onclick="location.href=..."> für reine Navigation. Kein neuer Tab, kein Link kopieren, kein Crawling.
role="button" an einem Link, der navigiert. Er sagt Screenreader-Nutzern, dass dort ein Button ist, und dann wechselt die Seite. Lass ihn einen Link bleiben.
Als Buttons gestylte Links für Aktionen wie „Löschen“ oder „Menü öffnen“ mit href="#". Wenn nichts geladen wird, nimm einen <button type="button">.
<a disabled>. Das Attribut gibt es an Links nicht. Entferne das href.
display: inline-block vergessen, sodass der vertikale Innenabstand die Zeilen darüber und darunter überlappt.

Häufig gestellte Fragen

Wie mache ich in HTML einen Button, der auf eine andere Seite verlinkt?

Nimm einen Link und style ihn wie einen Button: <a href="/signup" class="btn">Sign up</a> mit CSS für Innenabstand, Hintergrund, abgerundete Ecken und text-decoration: none. Er sieht aus wie ein Button und verhält sich wie ein Link, und genau das ist er auch.

Darf ich einen Button in ein a-Tag setzen?

Nein. Der HTML-Standard erlaubt keinen interaktiven Inhalt wie <button> in <a>. Browser gehen unterschiedlich damit um, Tastaturnutzer bekommen zwei Tab-Stopps für ein Bedienelement, und Screenreader sagen es verwirrend an. Nimm ein einziges Element.

Hat ein button ein href-Attribut?

Nein. <button> hat kein href. Um den Browser zu einer URL zu schicken, nimm <a href> oder setz den Button in ein <form> mit einem action (ein formaction-Attribut am Button überschreibt es).

Ist onclick mit location.href an einem Button schlecht?

Es funktioniert, aber der Leser verliert alles, was Links ihm bieten: Mittelklick und Strg+Klick für einen neuen Tab, Link-Adresse kopieren, die URL-Vorschau beim Überfahren, und Suchmaschinen folgen ihm nicht wie einem Link. Nimm ein <a>, wenn das Ziel eine URL ist.

Wie deaktiviere ich einen Link, der wie ein Button aussieht?

Links haben kein disabled-Attribut. Entferne das href, damit er kein Link mehr ist, füg aria-disabled="true" hinzu und style ihn als deaktiviert. Setz das href wieder ein, wenn er wieder funktionieren soll.

Verwandte Konzepte