Comment Créer un Bouton HTML Agissant comme un Lien

Il y a plusieurs moyens de créer un bouton HTML agissant comme un lien (c’est-à-dire, en cliquant dessus, l'utilisateur est redirigé vers l'URL spécifiée).

Vous pouvez choisir un des moyens suivants pour ajouter un lien au bouton HTML.

1. Ajouter un événement onclick en ligne

  1. à la balise HTML <button> dans l'élément HTML <form> .

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <button onclick="window.location.href = 'https://fr.w3docs.com/';">Cliquez Ici</button>
  </body>
</html>
Cela peut ne pas fonctionner si le bouton est dans une balise de formulaire
  1. à la balise <input> dans l'élément HTML <form> .

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form>
      <input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs" />
    </form>
  </body>
</html>
Ces liens ne fonctionnent pas lorsque JavaScript est désactivé et que les moteurs de recherche peuvent ignorer ce type de liens.

2.Utilisez l'attribut action ou formaction dans l'élément <form>

  1. l'attribut action

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form action="https://fr.w3docs.com/">
      <button type="submit">Cliquez sur moi</button>
    </form>
  </body>
</html>

Pour ouvrir le lien dans un nouveau tab, ajoutez l'attribut target="_blank.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form action="https://fr.w3docs.com/" method="get" target="_blank">
      <button type="submit">Cliquez sur moi</button>
    </form>
  </body>
</html>
Comme il n'y a pas de formulaire et qu'aucune donnée n'est soumise, cela peut être sémantiquement incorrect. Cependant, ce balisage est valide.
  1. L'attribut HTML5 formaction.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form>
      <button type="submit" formaction="https://fr.w3docs.com/">Cliquez sur moi</button>
    </form>
  </body>
</html>
L’attribut formaction est utilisé seulement pour les boutons avec type=”submit”. Comme cet attribut est spécifique à HTML5, la prise en charge dans les anciens navigateurs peut être médiocre.

3. Ajoutez un lien style comme un bouton HTML button (à l’aide de CSS)

555

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .button {
        background-color: #1c87c9;
        border: none;
        color: white;
        padding: 20px 34px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://www.w3docs.com/" class="button">Cliquez ici</a>
  </body>
</html>
Comme un style complexe est requis, cela peut ne pas fonctionner sur certains navigateurs.