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

1909

Je voudrais créer un bouton HTML qui agit comme un lien. Ainsi, lorsque vous cliquez sur le bouton, il redirige vers une page. J'aimerais qu'elle soit aussi accessible que possible.

J'aimerais aussi qu'il n'y ait pas de caractères supplémentaires ou de paramètres dans l'URL.

Comment puis-je atteindre cet objectif?


Sur la base des réponses publiées jusqu'à présent, je fais actuellement ceci:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

mais le problème avec cela est que dans Safari et Internet Explorer , il ajoute un caractère de point d'interrogation à la fin de l'URL. J'ai besoin de trouver une solution qui n'ajoute aucun caractère à la fin de l'URL.

Il existe deux autres solutions pour ce faire: Utiliser JavaScript ou styliser un lien pour ressembler à un bouton.

Utilisation de JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Mais cela nécessite évidemment JavaScript, et pour cette raison, il est moins accessible aux lecteurs d'écran. Le but d'un lien est d'aller sur une autre page. Donc, essayer de faire agir un bouton comme un lien n'est pas la bonne solution. Ma suggestion est d'utiliser un lien et de le styliser pour ressembler à un bouton .

<a href="/link/to/page2">Continue</a>
Andrew
la source
38
Remplacez GET par POST. Personne ne semble avoir résolu le premier problème du PO, qui était ?sur l'URL. Cela est dû au fait que le formulaire est type="GET", changez-le en type="POST"et ?à la fin de l'URL disparaît. En effet, GET envoie toutes les variables dans l'URL, d'où le ?.
redfox05
11
@ redfox05 Cela fonctionne dans un contexte où vous n'êtes pas strict quant à la méthode que vous acceptez pour vos pages. Dans un contexte où vous rejetez les publications sur des pages qui s'attendent à GETce que cela échoue. Je pense toujours que l'utilisation d'un lien a du sens avec la mise en garde qu'il ne réagira pas à la "barre d'espace" lorsqu'il est actif comme le fait le bouton. De plus, certains styles et comportements seront différents (comme ceux qui peuvent être déplacés). Si vous voulez la véritable expérience de "lien de bouton", avoir des redirections côté serveur pour que l'URL se termine par ?le supprimer pourrait également être une option.
Nicolas Bouvrette
1
cssbuttongenerator.com peut être utile si vous souhaitez créer un bouton avec css.
neige
1
Je pense qu'il est préférable de créer un lien qui ressemble à un bouton
yasar
1
Juste une note, pour moi "bouton agit comme un lien" signifie que je peux faire un clic droit et décider d'ouvrir dans un nouvel onglet / fenêtre, ce qui ne fonctionne pas avec les solutions JS ...
Betlista

Réponses:

2107

HTML

Le moyen HTML simple consiste à le mettre dans un <form>dans lequel vous spécifiez l'URL cible souhaitée dans l' actionattribut.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

Si nécessaire, définissez CSS display: inline;sur le formulaire pour le garder dans le flux avec le texte environnant. Au lieu de <input type="submit">dans l'exemple ci-dessus, vous pouvez également utiliser <button type="submit">. La seule différence est que l' <button>élément permet aux enfants.

Vous vous attendriez intuitivement à pouvoir utiliser <button href="https://google.com">un <a>élément analogue à l' élément, mais malheureusement non, cet attribut n'existe pas selon la spécification HTML .

CSS

Si CSS est autorisé, utilisez simplement un <a>style que vous stylisez pour ressembler à un bouton utilisant entre autres la appearancepropriété ( il n'est pas pris en charge dans Internet Explorer ).

<a href="https://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

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

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

Javascript

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

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Au lieu de <input type="button">dans l'exemple ci-dessus, vous pouvez également utiliser <button>. La seule différence est que l' <button>élément permet aux enfants.

BalusC
la source
86
Simple et sympa. Une bonne solution. Ajoutez display: inlineau formulaire pour garder le bouton dans le flux.
Pekka
13
en safari, cela ajoute un point d'interrogation à la fin de l'url ... y a-t-il un moyen de le faire qui n'ajoute rien à l'url?
Andrew
11
@BalusC Belle solution, mais si elle se trouve dans un autre formulaire (formulaire parent), appuyer sur ce bouton redirige vers l'adresse dans l'attribut d'action du formulaire parent.
Vladimir
100
Est-ce juste moi ou la balise <button> manque-t-elle un attribut href évident?
14
Semble simple et agréable, mais peut avoir des effets secondaires s'il n'est pas considéré correctement. c'est-à-dire la création d'un 2e formulaire dans la page, d'un formulaire imbriqué, etc.
Tejasvi Hegde
599

<button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

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

Adam
la source
1
@pinouchon Devrait fonctionner. la fenêtre est implicite. Il pourrait s'agir d'un bogue IE9, stackoverflow.com/questions/7690645/…
Adam
12
Il semble que si vous ne spécifiez pas type = "button", cela ne fonctionnera pas toujours. On dirait que le bouton sera par défaut "soumettre"
kenitech
58
Si vous souhaitez ouvrir le lien dans une nouvelle fenêtre / un nouvel onglet, utilisez: onclick = "window.open (' example.com', '_ blank' );"
bennos
4
@kenitech correct, selon les spécifications : "La valeur manquante par défaut est l' état du bouton Soumettre ."
Niels Keurentjes
4
mais l'utilisateur ne peut pas cliquer avec le bouton droit de la souris sur ouvrir dans un nouvel onglet, pour que cela fonctionne, vous
avez
433

Si c'est l'apparence visuelle d'un bouton que vous recherchez dans une balise d'ancrage HTML de base, vous pouvez utiliser Twitter Bootstrap framework pour formater l'un des liens / boutons de type HTML courants suivants pour apparaître comme un bouton. Veuillez noter les différences visuelles entre les versions 2, 3 ou 4 du framework:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Exemple d' apparence de Bootstrap (v4) :

Exemple de sortie des boutons Boostrap v4

Exemple d' apparence de Bootstrap (v3) :

Exemple de sortie des boutons Boostrap v3

Exemple d' apparence de Bootstrap (v2) :

Exemple de sortie des boutons Boostrap v2

Berne
la source
46
Semble un peu exagéré pour styliser un seul bouton, non? Avec la bordure, le rembourrage, l'arrière-plan et d'autres effets CSS, vous pouvez styliser les boutons et les liens pour qu'ils se ressemblent sans passer par un cadre entier. La méthodologie utilisée par Bootstrap est bonne, mais l'utilisation de Bootstrap semble excessive.
scottkellum
150

Utilisation:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

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

RedFilter
la source
59
@BalusC: Ni fait cette page
Robert Harvey
3
@Rob: ce n'est pas mon problème :) Jetez-le sur Meta et voyez. Cependant, l' targetattribut est imo sur le bord.
BalusC
128

Depuis HTML5, les boutons prennent en charge l' formactionattribut. Mieux encore, aucun Javascript ou tromperie n'est nécessaire.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Avertissements

  • Doit être entouré d' <form>étiquettes.
  • <button>le type doit être «soumettre» (ou non spécifié), je n'ai pas pu le faire fonctionner avec le type «bouton». Ce qui soulève le point ci-dessous.
  • Remplace l'action par défaut dans un formulaire. En d'autres termes, si vous faites cela dans une autre forme, cela va provoquer un conflit.

Référence: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Support du navigateur: https://developer.mozilla.org/en-US/docs/Web/ HTML / élément / bouton # Browser_compatibility

EternalHour
la source
5
Juste pour compléter les informations: formactionest compatible depuis " IE world " depuis la version 10 et supérieure
Luca Detomi
1
@EternalHour Vraiment curieux. Dans les exemples que vous et moi avons fournis, est-il censé y avoir une différence appréciable entre le comportement de ces deux formes? Dans ce cas précis, <button formaction>=== <form action>?
pseudosavant
2
@pseudosavant - La différence est que votre réponse repose sur Javascript pour fonctionner. Dans cette solution, aucun Javascript n'est nécessaire, c'est du HTML simple.
EternalHour
1
@EternalHour Désolé, j'aurais dû être plus clair. Évidemment, le JS rend le mien différent, mais ce n'est qu'une amélioration progressive. Le formulaire va toujours à ce lien sans le JS. J'étais curieux de savoir le comportement prévu des HTML uniquement <form>dans chacun de nos exemples. Est formaction-il buttoncensé ajouter le ?à une soumission GET vide? Dans ce JSBin, il semble que le HTML se comporte exactement de la même manière pour les deux.
pseudosavant
2
Il est utile de noter que cela ne fonctionne que lorsqu'il est enveloppé par des balises de formulaire.
J'ai
57

C'est vraiment très simple et sans utiliser aucun élément de formulaire. Vous pouvez simplement utiliser la balise <a> avec un bouton à l'intérieur :).

Comme ça:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

Et il chargera le href dans la même page. Vous voulez une nouvelle page? Utilisez simplement target="_blank".

ÉDITER

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

Lucian Minea
la source
18
Bien que cela fonctionne, cela ne devrait pas être considéré comme une solution mais une solution de contournement car si vous passez ce code via le validateur W3C, vous obtiendrez des erreurs.
Hyder B.
7
Oui, Hyder B. vous avez raison, mais vous devez également garder à l'esprit que les normes ne sont que des guides bruts. En tant que programmeur, vous devez toujours sortir des sentiers battus et essayer des choses qui ne sont pas dans le livre;).
Lucian Minea
NE JAMAIS envelopper d'autres ancres ou éléments à action de forme dans l'ancre.
Roko C. Buljan
Aha, et pourquoi ça?
Lucian Minea
Vous devez l'utiliser <button type="button">...pour qu'il ne fonctionne pas par défaut en tant que Submit
Stephen R
39

Si vous utilisez un formulaire interne, ajoutez l'attribut type = "reset" avec l'élément bouton. Cela empêchera l'action de formulaire.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>
saravanabawa
la source
Seulement si vous souhaitez réinitialiser votre formulaire. Utilisationtype="button"
Stephen R
27
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
ghoppe
la source
8
@Robusto qui était un commentaire sarcastique sur l'espace vide qui était là :) Ce n'est pas une bonne solution IMO, car cela ne fonctionnera pas sans JavaScript.
Pekka
1
@Pekka: yup, et ce n'est même pas du xhtml bien formé
Sean Patrick Floyd
8
si vous utilisez un formulaire, utilisez simplement une soumission, si vous utilisez onclick, pourquoi vous embêter avec le formulaire. -1
NimChimpsky
Ce n'est pas du HTML bien formé. La balise inputn'a pas de balise de fin.
Peter Mortensen
10
@PeterMortensen Selon la spécification HTML , l' inputélément est un élément void. Il doit avoir une balise de début mais ne doit pas avoir de balise de fin.
ghoppe
27

Il semble y avoir trois solutions à ce problème (toutes avec des avantages et des inconvénients).

Solution 1: bouton dans un formulaire.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

Mais le problème est que dans certaines versions de navigateurs populaires tels que Chrome, Safari et Internet Explorer, il ajoute un caractère de point d'interrogation à la fin de l'URL. En d'autres termes, le code au-dessus de votre URL finira par ressembler à ceci:

http://someserver/pages2?

Il existe un moyen de résoudre ce problème, mais cela nécessitera une configuration côté serveur. Un exemple utilisant Apache Mod_rewrite serait de rediriger toutes les demandes avec un suivi ?vers leur URL correspondante sans le ?. Voici un exemple utilisant .htaccess, mais il y a un fil complet ici :

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Des configurations similaires peuvent varier en fonction du serveur Web et de la pile utilisés. Donc, un résumé de cette approche:

Avantages:

  1. Ceci est un vrai bouton, et sémantiquement il a du sens.
  2. Puisqu'il s'agit d'un vrai bouton, il agira également comme un vrai bouton (par exemple, comportement déplaçable et / ou imitation d'un clic lorsque vous appuyez sur la barre d'espace lorsqu'il est actif).
  3. Aucun JavaScript, aucun style complexe requis.

Les inconvénients:

  1. Trailing ? semble moche dans certains navigateurs. Cela peut être résolu par un piratage (dans certains cas) en utilisant POST au lieu de GET, mais la bonne façon est d'avoir une redirection côté serveur. L'inconvénient de la redirection côté serveur est qu'elle provoquera un appel HTTP supplémentaire pour ces liens en raison de la redirection 304.
  2. Ajoute un <form>élément supplémentaire
  3. Le positionnement des éléments lors de l'utilisation de plusieurs formulaires peut être délicat et devient encore pire lorsqu'il s'agit de conceptions réactives. Une mise en page peut devenir impossible à réaliser avec cette solution en fonction de l'ordre des éléments. Cela peut finir par affecter la convivialité si la conception est affectée par ce défi.

Solution 2: utilisation de JavaScript.

Vous pouvez utiliser JavaScript pour déclencher un clic et d'autres événements pour imiter le comportement d'un lien à l'aide d'un bouton. L'exemple ci-dessous pourrait être amélioré et supprimé du HTML, mais il est là simplement pour illustrer l'idée:

<button onclick="window.location.href='/page2'">Continue</button>

Avantages:

  1. Simple (pour l'exigence de base) et garder la sémantique tout en ne nécessitant pas de formulaire supplémentaire.
  2. Puisqu'il s'agit d'un vrai bouton, il agira également comme un vrai bouton (par exemple, comportement déplaçable et / ou imitation d'un clic lorsque vous appuyez sur la barre d'espace lorsqu'il est actif).

Les inconvénients:

  1. Nécessite JavaScript, ce qui signifie moins accessible. Ce n'est pas idéal pour un élément de base (noyau) tel qu'un lien.

Solution 3: ancre (lien) de style bouton.

Styliser un lien comme un bouton est relativement facile et peut offrir une expérience similaire sur différents navigateurs. Bootstrap le fait, mais il est également facile à réaliser par vous-même en utilisant des styles simples.

Avantages:

  1. Simple (pour les exigences de base) et bon support multi-navigateur.
  2. N'a pas besoin d'un <form>pour fonctionner.
  3. N'a pas besoin de JavaScript pour fonctionner.

Les inconvénients:

  1. La sémantique est en quelque sorte cassée, car vous voulez un bouton qui agit comme un lien et non un lien qui agit comme un bouton.
  2. Il ne reproduira pas tous les comportements de la solution # 1. Il ne prendra pas en charge le même comportement que le bouton. Par exemple, les liens réagissent différemment lorsqu'ils sont glissés. De plus, le déclencheur de lien "barre d'espace" ne fonctionnera pas sans un code JavaScript supplémentaire. Cela ajoutera beaucoup de complexité car les navigateurs ne sont pas cohérents sur la façon dont ils prennent en charge les keypressévénements sur les boutons.

Conclusion

Solution n ° 1 ( bouton dans un formulaire ) semble être la plus transparente pour les utilisateurs avec un minimum de travail requis. Si votre mise en page n'est pas affectée par ce choix et que le réglage côté serveur est réalisable, c'est une bonne option dans les cas où l'accessibilité est la priorité absolue (par exemple les liens sur une page d'erreur ou des messages d'erreur).

Si JavaScript n'est pas un obstacle à vos exigences d'accessibilité, la solution n ° 2 ( JavaScript ) sera préférée aux n ° 1 et n ° 3.

Si pour une raison quelconque, l'accessibilité est vitale (JavaScript n'est pas une option) mais que vous êtes dans une situation où votre conception et / ou la configuration de votre serveur vous empêchent d'utiliser l'option n ° 1, alors la solution n ° 3 ( ancre de style bouton ) est une bonne alternative pour résoudre ce problème avec un impact d'utilisation minimal.

Nicolas Bouvrette
la source
21

Pourquoi ne pas simplement placer votre bouton à l'intérieur d'une balise de référence, par exemple

<a href="https://www.google.com/"><button>Next</button></a>

Cela semble fonctionner parfaitement pour moi et n'ajoute aucune balise% 20 au lien, comme vous le souhaitez. J'ai utilisé un lien vers Google pour démontrer.

Vous pouvez bien sûr envelopper cela dans une balise de formulaire, mais ce n'est pas nécessaire.

Lorsque vous liez un autre fichier local, placez-le simplement dans le même dossier et ajoutez le nom de fichier comme référence. Ou spécifiez l'emplacement du fichier s'il ne se trouve pas dans le même dossier.

<a href="myOtherFile"><button>Next</button></a>

Cela n'ajoute pas non plus de caractère à la fin de l'URL, mais il a le chemin du projet de fichiers comme URL avant de se terminer par le nom du fichier. par exemple

Si la structure de mon projet était ...

.. dénote un dossier - dénote un fichier alors que quatre | désigne un sous-répertoire ou un fichier dans le dossier parent

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Si j'ouvre main.html, l'URL serait,

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Cependant, lorsque j'ai cliqué sur le bouton à l'intérieur de main.html pour passer à Secondary.html, l'URL serait,

http://localhost:0000/public/html/secondary.html 

Aucun caractère spécial n'est inclus à la fin de l'URL. J'espère que ça aide. Soit dit en passant - (% 20 désigne un espace dans une URL codé et inséré à leur place.)

Remarque: le localhost: 0000 ne sera évidemment pas 0000, vous aurez votre propre numéro de port là-bas.

De plus, le? _Ijt = xxxxxxxxxxxxxx à la fin de l'URL main.html, x est déterminé par votre propre connexion donc ne sera évidemment pas égal au mien.


Il peut sembler que j'énonce des points vraiment basiques, mais je veux juste expliquer le mieux possible. Merci d'avoir lu et j'espère que cela aidera au moins quelqu'un. Bonne programmation.

C.Gadd
la source
19

Vous pouvez simplement mettre une balise a autour de l'élément:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

Uriahs Victor
la source
10
Non, tu ne peux pas. HTML interdit l'imbrication à l' <button>intérieur <a>.
Quentin
6
C'est essentiellement la même chose que cette réponse des années plus tôt .
Quentin
2
S'il l'interdit, alors pourquoi ça marche? :) Aucun développeur sérieux ne tient compte de tout ce que le validateur du W3C dit ... essayez de faire passer Facebook ou Google ou tout autre site Web énorme par là ... Le Web n'attend personne
Uriahs Victor
3
@UriahsVictor Cela peut fonctionner aujourd'hui, mais un jour, les fournisseurs de navigateur peuvent décider de modifier le comportement car il n'est pas valide.
Jacob Alvarez
2
@UriahsVictor Les applets Flash et Java étaient également assez courantes.
Jacob Alvarez
17

La seule façon de le faire (à l'exception de l'idée de forme ingénieuse de BalusC!) Est d'ajouter un JavaScript onclick événement au bouton, ce qui n'est pas bon pour l'accessibilité.

Avez-vous envisagé de créer un lien normal comme un bouton? Vous ne pouvez pas atteindre des boutons spécifiques au système d'exploitation de cette façon, mais c'est toujours le meilleur moyen IMO.

Pekka
la source
Je pense qu'il parle non seulement de fonctionnalité (clic) mais aussi d'apparence.
1
@Web Logic yup, c'est pourquoi je parle de styliser le lien pour qu'il ressemble à un bouton.
Pekka
6
@ChrisMarisic il y a de nombreux inconvénients à utiliser onClick: cela ne fonctionne pas avec JS désactivé; l'utilisateur ne peut pas ouvrir un lien dans un nouvel onglet / fenêtre, ni copier le lien dans son presse-papiers pour le partager; les analyseurs et les bots ne pourront pas reconnaître et suivre le lien; les navigateurs dotés d'une fonction de «prélecture» ne reconnaîtront pas le lien; et beaucoup plus.
Pekka
2
Bien que ce soient des points valables, je ne pense pas vraiment que cela traite vraiment de l'accessibilité. Voulez-vous dire la convivialité, pas l'accessibilité? Dans le développement Web, l'accessibilité est généralement réservée pour savoir précisément si les utilisateurs ayant une déficience visuelle peuvent bien utiliser votre application.
Chris Marisic
17

En suivant ce que quelques autres ont ajouté, vous pouvez vous déchaîner en utilisant simplement une classe CSS simple sans PHP, sans jQuery code , juste HTML et CSS simples.

Créez une classe CSS et ajoutez-la à votre ancre. Le code est ci-dessous.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

C'est ça. C'est très facile à faire et vous permet d'être aussi créatif que vous le souhaitez. Vous contrôlez les couleurs, la taille, les formes (rayon), etc. Pour plus de détails, consultez le site sur lequel j'ai trouvé ceci .

artie
la source
17

Si vous voulez éviter d'avoir à utiliser un formulaire ou une entrée et que vous recherchez un lien vers un bouton, vous pouvez créer de bons liens vers un bouton avec un wrapper div, une ancre et un h1 balise. Vous voudriez potentiellement cela afin que vous puissiez placer librement le bouton de lien autour de votre page. Cela est particulièrement utile pour centrer horizontalement les boutons et pour y avoir du texte centré verticalement. Voici comment:

Votre bouton sera composé de trois pièces imbriquées: un wrapper div, une ancre et un h1, comme ceci:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}
<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Voici un jsFiddle pour le vérifier et jouer avec.

Avantages de cette configuration: 1. Rendre l'affichage du wrapper div: le bloc facilite le centrage (en utilisant la marge: 0 auto) et la position (alors qu'un <a> est en ligne et plus difficile à positionner et impossible à centrer).

  1. Vous pouvez simplement faire afficher le <a> bloc: le déplacer, le déplacer et le styliser comme un bouton, mais l'alignement vertical du texte à l'intérieur devient difficile.

  2. Cela vous permet de faire le <a> display: inline-table et le <h1> display: table-cell, qui vous permet d'utiliser vertical-align: middle sur le <h1> et de le centrer verticalement (ce qui est toujours agréable sur un bouton). Oui, vous pouvez utiliser un remplissage, mais si vous souhaitez que votre bouton se redimensionne dynamiquement, ce ne sera pas aussi propre.

  3. Parfois, lorsque vous intégrez un <a> dans un div, seul le texte est cliquable, cette configuration rend le bouton entier cliquable.

  4. Vous n'avez pas à gérer les formulaires si vous essayez simplement de passer à une autre page. Les formulaires sont destinés à la saisie d'informations et doivent être réservés à cet effet.

  5. Vous permet de séparer proprement le style des boutons et le style du texte (avantage d'étirement? Bien sûr, mais CSS peut avoir un aspect désagréable, il est donc agréable de le décomposer).

Cela m'a vraiment facilité la vie en créant un site Web mobile pour des écrans de taille variable.

MoMo
la source
Vous obtenez en fait un bouton raisonnable sans CSS du tout
Soren
15

@ Nicolas, la suite a fonctionné pour moi car la vôtre n'avait pas eu type="button"raison de laquelle elle a commencé à se comporter comme type de soumission .. puisque j'ai déjà un type de soumission. Cela n'a pas fonctionné pour moi .... et maintenant vous pouvez soit ajouter une classe bouton ou <a>pour obtenir la disposition requise:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>
Bhawna Jain
la source
12

Une autre option consiste à créer un lien dans le bouton:

<button type="button"><a href="yourlink.com">Link link</a></button>

Ensuite, utilisez CSS pour styliser le lien et le bouton, de sorte que le lien occupe tout l'espace dans le bouton (donc il n'y a pas de mauvais clic par l'utilisateur):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

J'ai créé une démo ici .

lukeocom
la source
6
Gardez à l'esprit que la spécification indique que ce n'est pas valide car les boutons ne doivent pas contenir de descendants interactifs. w3.org/TR/2011/WD-html5-20110525/the-button-element.html
lukeocom
1
Vous avez tous les deux raison. VS2015 signale ceci avec un avertissement: "L'élément 'a' ne peut pas être imbriqué à l'intérieur de l'élément 'bouton'" mais il fonctionne avec: IE11, Edge, Chrome, Firefox, Safari et au moins certains (peut-être tous) les navigateurs mobiles actuellement. Alors n'utilisez pas cette technique mais si vous l'avez fait dans le passé, cela fonctionne pour l'instant;)
Zeek2
8

Si vous souhaitez créer un bouton utilisé pour une URL n'importe où, créez une classe de bouton pour une ancre.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}
Maarek
la source
7

Je sais qu'il y a eu beaucoup de réponses soumises, mais aucune ne semblait vraiment résoudre le problème. Voici ma vision d'une solution:

  1. Utilisez la <form method="get">méthode avec laquelle l'OP commence. Cela fonctionne très bien, mais il ajoute parfois un? à l'URL. le? le principal problème.
  2. Utilisez jQuery / JavaScript pour faire le lien suivant lorsque JavaScript est activé afin que cela ?ne soit pas ajouté à l'URL. Il reviendra sans problème au<form> méthode pour la très petite fraction des utilisateurs qui n'ont pas activé JavaScript.
  3. Le code JavaScript utilise la délégation d'événements afin que vous puissiez attacher un écouteur d'événements avant le <form>ou<button> même exister. J'utilise jQuery dans cet exemple, car il est rapide et facile, mais il peut également être fait en JavaScript «vanilla».
  4. Le code JavaScript empêche l'action par défaut de se produire et suit ensuite le lien donné dans l' <form> actionattribut.

Exemple JSBin (l'extrait de code ne peut pas suivre les liens)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});
<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

pseudosavant
la source
7

7 façons de le faire:

  1. En utilisant window.location.href = 'URL'
  2. En utilisant window.location.replace('URL')
  3. En utilisant window.location = 'URL'
  4. En utilisant window.open('URL')
  5. En utilisant window.location.assign('URL')
  6. Utilisation du formulaire HTML
  7. En utilisant HTML ancre tag

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

Adnan Toky
la source
4

Pour HTML 5 et bouton stylisé avec fond d'image

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

Anees Hameed
la source
5
Ne valide pas. Coller dans validator.w3.org/nu/#textarea donne Erreur: L'entrée d'élément ne doit pas apparaître comme un descendant de l'élément a.
Mark Amery du
3

Vous pouvez également utiliser un bouton:

Par exemple, dans la syntaxe ASP.NET Core :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>
Elnaz
la source
3

si vous utilisez un certificat SSL

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>
Vikash Chauhan
la source
2

Les personnes qui ont répondu en utilisant des <a></a>attributs sur un<button></button> été utiles.

MAIS récemment, j'ai rencontré un problème lorsque j'ai utilisé un lien dans un fichier <form></form>.

Le bouton est maintenant considéré comme / comme un bouton d'envoi (HTML5). J'ai essayé de contourner ce problème et j'ai trouvé cette méthode.

Créez un bouton de style CSS comme celui ci-dessous:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

Ou créez-en un nouveau ici: CSS Button Generator

Et puis créez votre lien avec une balise de classe nommée d'après le style CSS que vous avez créé:

<a href='link.php' class='btn-style'>Link</a>

Voici un violon:

JS Fiddle

Logan Wayne
la source
3
Définissez le type de bouton = "bouton", qui vous permettra de cliquer dessus sans soumettre le formulaire.
Blake A. Nichols
2

Je l'ai utilisé pour un site Web sur lequel je travaille actuellement et cela fonctionne très bien!. Si vous voulez aussi un style cool, je vais mettre le CSS ici.

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

Travailler JSFiddle ici .

Jasch1
la source
2

Vous pouvez également définir les boutons type-property sur "bouton" (cela ne leur permet pas de soumettre le formulaire), puis l'imbriquer dans un lien (cela redirige l'utilisateur).

De cette façon, vous pourriez avoir un autre bouton dans le même formulaire qui envoie le formulaire, au cas où cela serait nécessaire. Je pense également que cela est préférable dans la plupart des cas plutôt que de définir la méthode et l'action du formulaire pour être un lien (sauf s'il s'agit d'un formulaire de recherche, je suppose ...)

Exemple:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

De cette façon, le premier bouton redirige l'utilisateur, tandis que le second soumet le formulaire.

Veillez à ce que le bouton ne déclenche aucune action, car cela entraînerait un conflit. De plus, comme Arius l'a souligné, vous devez savoir que, pour la raison ci-dessus, ce n'est pas à proprement parler considéré comme du HTML valide, selon la norme. Il fonctionne cependant comme prévu dans Firefox et Chrome, mais je ne l'ai pas encore testé pour Internet Explorer.

Anders Martini
la source
2
L'élément 'bouton' ne peut pas être imbriqué dans l'élément 'a'.
Arius
selon la norme non, mais d'après mon expérience, cela fonctionne bien. Je n'ai pas encore testé intensivement les navigateurs, mais au moins FF et Chrome semblent le gérer très bien, avec le comportement attendu.
Anders Martini
Arius: Lisez un peu, expérimentez un peu plus et découvrez qu'un élément bouton peut en fait être imbriqué dans un élément <a>, tant que l'élément bouton n'a pas sa propre action appliquée (car cela entraînerait évidemment un conflit - quelle action le navigateur effectuera-t-il? les boutons ou les <a>?) mais tant que vous vous assurez que l'élément de bouton lui-même ne déclenche aucune action une fois cliqué, cela devrait fonctionner très bien (probablement pas t être considéré comme une meilleure pratique)
Anders Martini
4
Ce n'est pas une question de possibilité. C'est juste contre la spécification HTML5 et c'est tout.
Arius
1

Vous pouvez utiliser javascript:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

Remplacez http://www.google.compar votre site Web, assurez-vous d'inclure http://avant l'URL.

Hayz
la source
1

En JavaScript

setLocation(base: string) {
  window.location.href = base;
}

En HTML

<button onclick="setLocation('/<whatever>')>GO</button>"
Joshua Michael Waggoner
la source
1

Tapez window.locationet appuyez sur enterdans la console de votre navigateur. Ensuite, vous pouvez avoir une idée claire de ce qui locationcontient

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

Vous pouvez définir n'importe quelle valeur à partir d'ici.

Donc, pour rediriger une autre page, vous pouvez définir une hrefvaleur avec votre lien.

   window.location.href = your link

Dans ton cas-

   <button onclick="window.location.href='www.google.com'">Google</button>
Nasir Khan
la source
0

Si ce dont vous avez besoin, c'est qu'il ressemblera à un bouton, en mettant l'accent sur l'image en dégradé , vous pouvez le faire:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
ilans
la source
0

Si vous souhaitez rediriger pour les pages qui résident sur votre site Web, alors voici ma méthode - j'ai ajouté l'attribut href au bouton et onclick assigné this.getAttribute ('href') à document.location.href

** Cela ne fonctionnera pas si vous référencez les URL hors site de votre domaine en raison de 'X-Frame-Options' à 'sameorigin'.

Exemple de code:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
Meir Gabay
la source