Dokumentacja HTML z przykładami: Przycisk jako link

Q: Jak zrobić w HTML przycisk, który prowadzi do innej strony?

Użyj linku i wystylizuj go jak przycisk: Sign up z CSS ustawiającym padding, tło, zaokrąglenie i text-decoration: none. Wygląda jak przycisk i działa jak link, bo nim jest.

Q: Czy przycisk ma atrybut href?

Nie. nie ma href. Aby przenieść przeglądarkę pod adres URL, użyj albo umieść przycisk w z action (atrybut formaction na przycisku go nadpisuje).

Q: Jak wyłączyć link, który wygląda jak przycisk?

Linki nie mają atrybutu disabled. Usuń href, żeby przestał być linkiem, dodaj aria-disabled="true" i nadaj mu styl wyłączonego. Przywróć href, gdy ma znowu działać.

Jak zrobić przycisk, który prowadzi do strony

Napisz zwykły link, <a href>, i wystylizuj go w CSS tak, żeby wyglądał jak przycisk. Przenosi na stronę jak każdy link i zachowuje wszystkie funkcje linku: otwieranie w nowej karcie, kopiowanie adresu i podgląd adresu po najechaniu.

<!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>

Reguły, które zmieniają link w przycisk:

display: inline-block pozwala, by padding rozpychał pudełko, i zostawia je w linii tekstu.
text-decoration: none usuwa podkreślenie.
color i background zastępują niebieski kolor linku.
:focus-visible daje użytkownikom klawiatury wyraźną ramkę fokusu.

Ta sama klasa działa na <button>, więc przycisk wysyłający formularz i link do innej strony mogą wyglądać identycznie, a każdy robi swoje.

Przycisk czy link: którego elementu użyć

Liczy się to, co dzieje się po kliknięciu, a nie wygląd.

Kliknięcie	Użyj	Przykłady
Przenosi pod inny adres URL	`<a href>`	Zarejestruj się, Czytaj dalej, Zobacz cennik, Pobierz
Zmienia coś na tej stronie	`<button type="button">`	Otwórz menu, Odtwórz, Dodaj do koszyka, Pokaż hasło
Wysyła formularz	`<button type="submit">`	Zaloguj się, Szukaj, Zapisz

Link ogłaszany jako "link" i przycisk ogłaszany jako "przycisk" mówią użytkownikom czytników ekranu, co się stanie. Różni je też obsługa klawiatury: Enter aktywuje oba, ale Spacja tylko przyciski (na linku Spacja przewija stronę). Sam element przycisku opisuje strona przycisk HTML.

Dlaczego nie umieszczać przycisku w linku

Ten wzorzec większość osób próbuje jako pierwszy:

<!-- 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>

Standard HTML zabrania obu: <a> i <button> nie mogą zawierać elementów interaktywnych. W praktyce klawiatura dostaje dwa przystanki Tab dla jednej kontrolki, czytnik ekranu może ogłosić "link, przycisk, Sign up", a to, czy kliknięcie otworzy link, zależy od przeglądarki. Wybierz jeden element.

Dlaczego nie onclick z location.href

Drugie popularne obejście to przycisk, który ustawia adres w JavaScripcie. Wygląda tak samo jak 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>

(Przykład używa window.open, bo podgląd nie może opuścić strony; zwykle pisze się location.href = '...'.) Najedź na oba i kliknij je prawym przyciskiem: tylko prawdziwy link pokazuje swój adres i oferuje "Otwórz link w nowej karcie" oraz "Kopiuj adres linku". Przycisk nie obsługuje też Ctrl+klik ani kliknięcia środkowym przyciskiem, przeglądarka nie oznacza go jako odwiedzonego, a wyszukiwarki nie traktują go jak linku. Jeśli celem jest adres URL, napisz <a href>.

Przycisk formularza, który otwiera adres URL

Jest jeden przypadek, w którym <button> prowadzący do innej strony jest właściwy: gdy wysyła przy tym dane. Klasyczny przykład to pole wyszukiwania. action formularza to adres URL, a method="get" umieszcza pola w query stringu:

<!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>

Naciśnij Search: na prawdziwej stronie przeglądarka przeszłaby pod https://duckduckgo.com/?q=html+button+link. Podgląd zamiast tego pokazuje dane. formaction wysyła ten sam formularz pod inny adres z drugiego przycisku.

Wyłączone linki-przyciski

Linki nie mają atrybutu disabled; <a disabled> nic nie robi. Aby wyłączyć link-przycisk, usuń jego href (<a> bez href nie jest linkiem i nie da się go kliknąć ani ustawić na nim fokusu), i oznacz go przez aria-disabled="true", żeby wiedziały o tym i style, i czytniki ekranu:

<!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>

Naciśnij Tab w podglądzie: fokus trafia tylko na pierwszy przycisk. Niektóre strony zostawiają href i dodają zamiast tego pointer-events: none, ale to blokuje tylko mysz. Link nadal jest osiągalny klawiszem Tab, a Enter nadal go otwiera.

Przyciski nowej karty i pobierania

Każdy atrybut linku działa dalej na linku wystylizowanym jak przycisk:

<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>

To kolejny powód, by używać <a>: <button> nie ma download ani target. Więcej o target przeczytasz na stronie otwieranie linku w nowej karcie.

Częste błędy

Przycisk w linku albo link w przycisku. Niepoprawny HTML o nieprzewidywalnym działaniu.
<button onclick="location.href=..."> do zwykłej nawigacji. Brak nowej karty, kopiowania linku i indeksowania.
role="button" na linku, który przenosi na inną stronę. Mówi użytkownikom czytników ekranu, że to przycisk, a potem zmienia się strona. Niech zostanie linkiem.
Linki wystylizowane jak przyciski do akcji takich jak "Usuń" czy "Otwórz menu" z href="#". Jeśli nic się nie wczytuje, użyj <button type="button">.
<a disabled>. Linki nie mają tego atrybutu. Usuń href.
Brak display: inline-block, przez co pionowy padding nachodzi na linie powyżej i poniżej.

Najczęściej zadawane pytania

Jak zrobić w HTML przycisk, który prowadzi do innej strony?

Użyj linku i wystylizuj go jak przycisk: <a href="/signup" class="btn">Sign up</a> z CSS ustawiającym padding, tło, zaokrąglenie i text-decoration: none. Wygląda jak przycisk i działa jak link, bo nim jest.

Czy mogę umieścić przycisk w znaczniku a?

Nie. Standard HTML nie pozwala na treść interaktywną, taką jak <button>, wewnątrz <a>. Przeglądarki obsługują to różnie, użytkownicy klawiatury trafiają na dwa przystanki Tab dla jednej kontrolki, a czytniki ekranu ogłaszają ją myląco. Użyj jednego elementu.

Czy przycisk ma atrybut href?

Nie. <button> nie ma href. Aby przenieść przeglądarkę pod adres URL, użyj <a href> albo umieść przycisk w <form> z action (atrybut formaction na przycisku go nadpisuje).

Czy używanie onclick z location.href na przycisku to zły pomysł?

Działa, ale czytelnik traci wszystko, co dają linki: kliknięcie środkowym przyciskiem i Ctrl+klik dla nowej karty, kopiowanie adresu linku, podgląd adresu po najechaniu, a wyszukiwarki nie traktują go jak linku. Gdy celem jest adres URL, użyj <a>.

Jak wyłączyć link, który wygląda jak przycisk?

Linki nie mają atrybutu disabled. Usuń href, żeby przestał być linkiem, dodaj aria-disabled="true" i nadaj mu styl wyłączonego. Przywróć href, gdy ma znowu działać.

Powiązane zagadnienia