Comment créer un bouton HTML qui s'exécute comme un lien ?
Il est possible de faire en sorte qu'un bouton ait le même comportement qu'un lien. Voici comment.
En HTML, on utilise les liens afin de changer de page. Les boutons servent quant à eux soit à effectuer des actions sur une page avec du code JavaScript, soit à exécuter des actions sur un formulaire (le soumettre ou le vider par exemple). Il est possible de faire en sorte qu'un bouton ait le même comportement qu'un lien.
La première solution consiste à utiliser uniquement du HTML. Il faut placer le bouton dans un formulaire et placer l'URL de la page de destination comme action du formulaire. Il faudra alors que le bouton ait l'attribut type avec comme valeur submit.
Etant donné qu'un formulaire a par défaut un affichage en bloc, il faudra ajouter un attribut style avec la mention display:inline si vous voulez qu'il ne crée pas d'espace avec les éléments autour de lui.
Une autre solution consiste à utiliser du CSS pour modifier l'apparence d'un lien afin qu'il ressemble à un bouton. C'est possible grâce à la propriété appearance. Cette technique a cependant comme défaut le fait de ne pas être supportée par Internet Explorer. Le navigateur Edge est par contre compatible.
a.bouton {
/** Ces directives indiquent au lien de ressembler à un bouton pour les principaux moteurs de rendu **/
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
/**Les directives en dessous enlèvent l'apparence par défaut en bleu et avec du texte souligné pour un lien hypertexte **/
text-decoration: none;
color: initial;
}
Aller sur mon site
Une dernière solution consiste à utiliser un code JavaScript pour changer la page. Le fait de modifier l'attribut window.location.href provoque directement un changement de page.
<input type=button onclick=window.location.href='http://monsite.fr'; value=Aller sur mon site />