Comment puis-je créer un bouton HTML qui agit comme un lien?

Question

Comment créer un bouton HTML qui agit comme un lien? Ainsi, en cliquant sur le bouton, l'utilisateur est redirigé vers une page.

Je veux qu'il soit accessible, et avec un nombre minimal de caractères ou de paramètres supplémentaires dans l'URL.

Answer 1

HTML

La façon HTML de base consiste à le mettre dans un

où vous spécifiez l'URL cible souhaitée dans l'attribut action.

S'il est nécessaire, définissez display: inline; en CSS sur le formulaire pour le maintenir dans le flux avec le texte environnant. Au lieu de dans l'exemple ci-dessus, vous pouvez également utiliser . La seule différence est que l'élément autorise les enfants.

Intuitivement, vous vous attendriez à pouvoir utiliserde manière analogue à l'élément , mais malheureusement non, cet attribut n'existe pas selon la spécification HTML.

CSS

Si le CSS est autorisé, utilisez simplement un que vous stylisez pour ressembler à un bouton.

[Aller sur Google](https://google.com)

a.button {
    padding: 1px 6px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: buttontext;
    background-color: buttonface;
    text-decoration: none;
}

Ou choisissez l'une de ces nombreuses bibliothèques CSS comme Bootstrap.

Aller sur Google

Il convient de noter que, historiquement, la propriété de CSS appearance:button a également fonctionné dans certains navigateurs, mais cela était expérimental et a finalement été considéré comme une mauvaise fonction. Seuls none ou auto sont autorisés sur les éléments .

JavaScript

Si JavaScript est autorisé, définissez le window.location.href.

Au lieu de dans l'exemple ci-dessus, vous pouvez également utiliser

. La seule différence est que l'élément autorise les enfants.

Answer 2

         www.example.com

Notez que l'attribut type="button" est important, car sa valeur manquante par défaut est l'état de bouton Soumettre.

Answer 3

Si vous recherchez l'apparence visuelle d'un bouton dans une balise d'ancre HTML de base, vous pouvez utiliser le framework Twitter Bootstrap pour formater n'importe lequel des liens/boutons HTML communs suivants pour qu'ils apparaissent comme un bouton. Veuillez noter les différences visuelles entre les versions 2, 3 ou 4 du framework :

Lien
Bouton

Apparence de l'échantillon Bootstrap (v4) :

Apparence de l'échantillon Bootstrap (v3) :

Apparence de l'échantillon Bootstrap (v2) :

Answer 4

Utilisez :

    Cliquez-moi

Malheureusement, ce balisage n'est plus valide en HTML5 et ne sera ni valide ni ne fonctionnera toujours comme prévu. Utilisez une autre approche.

Answer 5

C'est en fait très simple et sans utiliser d'éléments de formulaire. Vous pouvez simplement utiliser la balise avec un bouton à l'intérieur :).

Comme ceci:

[Cliquez !](http://www.google.com)

Et il chargera le lien dans la même page. Vous voulez une nouvelle page ? Il suffit d'utiliser target="_blank".

EDIT

Quelques années plus tard, alors que ma solution fonctionne toujours, gardez à l'esprit que vous pouvez utiliser beaucoup de CSS pour le personnaliser comme vous le souhaitez. C'était juste un moyen rapide.