Créer un bouton HTML qui agit comme un lien

En HTML, la bonne méthode dépend du résultat attendu. Pour naviguer, utilisez un élément <a> avec href, puis donnez-lui l’apparence d’un bouton avec CSS. Utilisez <button> pour une action et un bouton d’envoi lorsqu’un formulaire doit transmettre des données. Ne placez jamais <button> ou <input> dans un <a> : ce sont deux éléments interactifs et leur imbrication crée des rôles et un comportement clavier contradictoires.

Choisir une ancre ou un bouton selon le résultat

Une ancre convient lorsque l’activation change l’adresse, ouvre un document, télécharge un fichier ou mène vers une autre page. href fournit une destination réelle : l’utilisateur peut ouvrir le lien dans un nouvel onglet, copier son adresse, le mettre en favori et l’atteindre au clavier.

Utilisez <button type="button"> lorsque l’activation modifie la page ou déclenche une action, par exemple ouvrir une boîte de dialogue, afficher un panneau ou exécuter un script. Une forme rectangulaire ne transforme pas un bouton en lien. Le rôle de l’élément doit correspondre à son comportement.

Donner l’apparence d’un bouton à <a> pour naviguer

C’est la solution recommandée lorsque le contrôle doit seulement naviguer. Conservez la destination dans href, choisissez un texte explicite et rendez le focus visible. Remplacez /docs/ par votre destination.

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

Le résultat ressemble à un bouton, mais reste un lien. Enter l’active et le navigateur connaît sa destination. Si le lien ouvre un nouvel onglet, indiquez-le dans le texte :

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

N’utilisez pas href="#" ou href="javascript:void(0)" pour imiter un bouton. Ces valeurs ne sont pas de vraies destinations. L’URL peut être relative, absolue, un fragment ou toute autre URL adressable. CSS change l’apparence, pas les fonctions natives du lien.

Utiliser <button> avec JavaScript seulement pour une action

Un bouton est justifié si l’application doit vérifier un état ou effectuer une autre action avant de naviguer. Déclarez son type et ajoutez un écouteur avec addEventListener. window.location.assign() effectue ensuite la navigation.

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

Cet exemple répond au pointeur, à Enter et à Espace, mais dépend de JavaScript. Pour une navigation simple, préférez l’ancre, qui reste utilisable si JavaScript est désactivé. Dans une application, placez le listener dans un module plutôt que d’utiliser un attribut onclick. Une destination vide ou incorrecte est un cas limite : validez les valeurs dynamiques avant assign().

Utiliser un formulaire lorsque la tâche consiste à envoyer des données

La méthode avec formulaire convient lorsqu’un serveur reçoit les champs. Placez la destination dans action et utilisez un contrôle d’envoi. Il s’agit d’une soumission, pas d’une simple navigation.

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

La saisie CSS button peut produire /search?q=CSS+button, selon l’encodage du formulaire. N’utilisez pas un formulaire vide uniquement pour obtenir une apparence de bouton. formaction permet de donner une autre destination à un bouton type="submit" précis.

Lorsque le projet exige une commande basée sur value, <input type="submit"> reste valide :

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

value devient le libellé visible. N’enveloppez pas cet input dans une ancre. <input type="button"> ne navigue ni n’envoie rien sans script.

Corriger un bouton qui n’ouvre pas le lien

• Pour naviguer, le code doit être <a href="...">, même si CSS lui donne un aspect de bouton.
• Dans un formulaire, utilisez type="button" pour une action qui ne soumet rien. Sans type, le bouton peut devenir submit et recharger la page.
• Si le bouton JavaScript ne réagit pas, vérifiez la console, le sélecteur et le chargement du script. Sans JavaScript, le handler ne s’exécute pas.
• Gardez :focus-visible afin que le contrôle reste repérable au clavier.
• Pour un lien ordinaire, ne combinez pas une ancre avec un <button> ou un <input> imbriqué.

En résumé, utilisez <a href="..."> pour naviguer, <button type="button"> pour une action et un bouton submit dans un formulaire lorsque des données doivent être envoyées. Cette séparation fournit une sémantique prévisible aux navigateurs et aux technologies d’assistance.