Docs HTML exécutables : Bouton lien

Q: Comment faire un bouton qui renvoie vers une autre page en HTML ?

Utilisez un lien et stylisez-le comme un bouton : Sign up avec du CSS pour le padding, le fond, l'arrondi et text-decoration: none. Il ressemble à un bouton et se comporte comme un lien, ce qu'il est.

Q: Un bouton a-t-il un attribut href ?

Non. n'a pas de href. Pour envoyer le navigateur vers une URL, utilisez , ou placez le bouton dans un avec un action (un attribut formaction sur le bouton le remplace).

Q: Comment désactiver un lien qui ressemble à un bouton ?

Les liens n'ont pas d'attribut disabled. Retirez le href pour qu'il cesse d'être un lien, ajoutez aria-disabled="true" et stylisez-le comme désactivé. Remettez le href quand il doit fonctionner de nouveau.

Comment faire un bouton qui mène à une page

Écrivez un lien normal, <a href>, et stylisez-le en CSS pour qu'il ressemble à un bouton. Il mène à la page comme n'importe quel lien, et garde toutes les fonctions d'un lien : ouvrir dans un nouvel onglet, copier l'adresse du lien et l'aperçu de l'URL au survol.

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

Les règles qui transforment un lien en bouton :

display: inline-block laisse le padding agrandir la boîte et la garde dans la ligne de texte.
text-decoration: none retire le soulignement.
color et background remplacent la couleur bleue du lien.
:focus-visible donne aux utilisateurs au clavier un anneau de focus bien visible.

La même classe marche sur un <button>, donc le bouton d'envoi d'un formulaire et un lien vers une autre page peuvent se ressembler exactement tout en faisant chacun leur travail.

Bouton ou lien : quel élément utiliser

La question porte sur ce qui se passe au clic, pas sur l'apparence.

Cliquer dessus	Utilisez	Exemples
Mène à une autre URL	`<a href>`	S'inscrire, Lire la suite, Voir les tarifs, Télécharger
Change quelque chose sur cette page	`<button type="button">`	Ouvrir le menu, Lecture, Ajouter au panier, Afficher le mot de passe
Envoie un formulaire	`<button type="submit">`	Se connecter, Rechercher, Enregistrer

Un lien annoncé comme « lien » et un bouton annoncé comme « bouton » indiquent aux utilisateurs de lecteurs d'écran ce qui va se passer. Leur comportement au clavier diffère aussi : Entrée active les deux, mais Espace n'active que les boutons (sur un lien, Espace fait défiler la page). L'élément bouton lui-même est présenté dans bouton HTML.

Pourquoi ne pas mettre un bouton dans un lien

C'est la solution que la plupart des gens essaient en premier :

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

Le standard HTML interdit les deux : <a> et <button> ne peuvent pas contenir d'éléments interactifs. En pratique, le clavier a deux arrêts de tabulation pour un seul contrôle, un lecteur d'écran peut annoncer « lien, bouton, Sign up », et le fait qu'un clic suive le lien dépend du navigateur. Choisissez un seul élément.

Pourquoi ne pas utiliser onclick avec location.href

L'autre contournement courant est un bouton qui définit l'URL en JavaScript. Il ressemble à un lien :

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

(L'exemple utilise window.open car l'aperçu ne doit pas changer de page ; le code habituel est location.href = '...'.) Survolez les deux et faites un clic droit : seul le vrai lien affiche son URL et propose « Ouvrir le lien dans un nouvel onglet » et « Copier l'adresse du lien ». Le bouton n'a pas non plus de Ctrl+clic ni de clic molette, le navigateur ne le marque pas comme visité, et les moteurs de recherche ne le suivent pas comme un lien. Si la destination est une URL, écrivez <a href>.

Un bouton de formulaire qui ouvre une URL

Il existe un cas où un <button> qui mène à une autre page est le bon choix : quand il envoie des données avec. Un champ de recherche est l'exemple classique. L'action du formulaire est l'URL et method="get" place les champs dans la chaîne de requête :

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

Appuyez sur Search : sur une vraie page, le navigateur irait à https://duckduckgo.com/?q=html+button+link. L'aperçu affiche les données au lieu de quitter la page. formaction envoie le même formulaire vers une URL différente depuis le second bouton.

Des liens en forme de bouton désactivés

Les liens n'ont pas d'attribut disabled ; <a disabled> ne fait rien. Pour désactiver un lien en forme de bouton, retirez son href (un <a> sans href n'est pas un lien et ne peut être ni cliqué ni focalisé), et marquez-le avec aria-disabled="true" pour que le style et les lecteurs d'écran le sachent :

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

Appuyez sur Tab dans l'aperçu : le focus ne se pose que sur le premier bouton. Certains sites gardent le href et ajoutent plutôt pointer-events: none, mais cela ne bloque que la souris. Le lien reste accessible avec Tab et Entrée le suit toujours.

Boutons nouvel onglet et téléchargement

Tous les attributs de lien continuent de marcher sur un lien stylisé en bouton :

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

C'est une autre raison d'utiliser <a> : un <button> n'a ni download ni target. Plus de détails sur target dans ouvrir un lien dans un nouvel onglet.

Erreurs fréquentes

Un bouton dans un lien, ou un lien dans un bouton. Du HTML invalide au comportement imprévisible.
<button onclick="location.href=..."> pour une simple navigation. Pas de nouvel onglet, pas de copie du lien, pas d'exploration par les robots.
role="button" sur un lien qui navigue. Cela annonce un bouton aux utilisateurs de lecteurs d'écran, puis la page change. Gardez-le comme lien.
Des liens stylisés en boutons pour des actions comme « Supprimer » ou « Ouvrir le menu » avec href="#". Si rien ne se charge, utilisez un <button type="button">.
<a disabled>. Cet attribut n'existe pas sur les liens. Retirez le href.
Oublier display: inline-block, si bien que le padding vertical chevauche les lignes du dessus et du dessous.

Questions fréquentes

Comment faire un bouton qui renvoie vers une autre page en HTML ?

Utilisez un lien et stylisez-le comme un bouton : <a href="/signup" class="btn">Sign up</a> avec du CSS pour le padding, le fond, l'arrondi et text-decoration: none. Il ressemble à un bouton et se comporte comme un lien, ce qu'il est.

Peut-on mettre un bouton dans une balise a ?

Non. Le standard HTML n'autorise pas de contenu interactif comme <button> dans <a>. Les navigateurs le gèrent différemment, les utilisateurs au clavier ont deux arrêts de tabulation pour un seul contrôle, et les lecteurs d'écran l'annoncent de façon confuse. Utilisez un seul élément.

Un bouton a-t-il un attribut href ?

Non. <button> n'a pas de href. Pour envoyer le navigateur vers une URL, utilisez <a href>, ou placez le bouton dans un <form> avec un action (un attribut formaction sur le bouton le remplace).

Est-ce mal d'utiliser onclick avec location.href sur un bouton ?

Cela marche, mais le lecteur perd tout ce qu'apportent les liens : clic molette et Ctrl+clic pour un nouvel onglet, « Copier l'adresse du lien », l'aperçu de l'URL au survol, et les moteurs de recherche ne le suivent pas comme un lien. Utilisez un <a> quand la cible est une URL.

Comment désactiver un lien qui ressemble à un bouton ?

Les liens n'ont pas d'attribut disabled. Retirez le href pour qu'il cesse d'être un lien, ajoutez aria-disabled="true" et stylisez-le comme désactivé. Remettez le href quand il doit fonctionner de nouveau.

Concepts liés