Comment créer un lien avec un bouton HTML

Il existe plusieurs façons de créer un bouton HTML qui agit comme un lien (c’est-à-dire lorsque l’utilisateur clique dessus, l’utilisateur est redirigé vers l’URL spécifiée).
 
 
Vous pouvez choisir l’une des méthodes suivantes pour ajouter un lien à un bouton HTML.
 

1. Ajouter l’événement onclick sur la balise <button>
<!DOCTYPE html>
<html>
   <head>
      <title>Créer un lien avec un bouton HTML</title>
   </head>
   <body>
      <button onclick="window.location.href = 'https://waytolearnx.com';"> Cliquez ici </button>
   </body>
</html>
Résultat

 

2. Ajouter l’événement onclick sur la balise <input>
<!DOCTYPE html>
<html>
   <head>
      <title>Créer un lien avec un bouton HTML</title>
   </head>
   <body>
      <input type="button" onclick="window.location.href = 'https://waytolearnx.com';" value="Cliquez ici"/>
   </body>
</html>
Résultat

 
 

3. Utiliser l’attribut action du formulaire
<!DOCTYPE html>
<html>
   <head>
      <title>Créer un lien avec un bouton HTML</title>
   </head>
   <body>
      <form action="https://waytolearnx.com">
         <button type="submit">Cliquez ici</button>
      </form>
   </body>
</html>
Résultat

 

4. Bouton HTML qui agit comme un lien en utilisant CSS
<!DOCTYPE html>
<html>
   <head>
      <title>Créer un lien avec un bouton HTML</title>
      <style>
         .button {
            background-color: #1c87c9;
            box-shadow: 0 5px 0 #105cad;
            color: white;
           padding: 1em 1.5em;
           position: relative;
           text-decoration: none;
           display: inline-block;
        }
      </style>
   </head>
   <body>
      <a href="https://waytolearnx.com" class="button">Cliquez ici</a>
   </body>
</html>
Résultat
Créer un lien avec un bouton HTML Cliquez ici

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *