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

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

Je l’aimerai aussi donc il n’y a pas de caractères supplémentaires, ni de parameters dans l’URL.

Comment puis-je atteindre cet objective?


Sur la base des réponses affichées jusqu’à présent, je le fais actuellement:

mais le problème est que dans Safari et Internet Explorer , il ajoute un point d’interrogation à la fin de l’URL. Je dois trouver une solution qui n’ajoute aucun caractère à la fin de l’URL.

Il existe deux autres solutions pour cela: Utiliser JavaScript ou styliser un lien pour qu’il ressemble à un bouton.

En utilisant JavaScript:

  

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 est la mauvaise solution. Ma suggestion est que vous devriez utiliser un lien et le styliser pour ressembler à un bouton .

 Continue 

HTML

La méthode HTML simple consiste à la placer dans un

où vous spécifiez l’URL cible souhaitée dans l’atsortingbut d’ action .

 

Si nécessaire, définissez l’ display: inline; CSS display: inline; sur le formulaire pour le garder dans le stream 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 permet aux enfants.

Vous vous attendez intuitivement à pouvoir utiliser le analogue à l’élément , mais malheureusement non, cet atsortingbut n’existe pas selon les spécifications HTML .

CSS

Si CSS est autorisé, utilisez simplement un que vous stylez pour ressembler à un bouton en utilisant, entre autres, la propriété d’ appearance ( seul le support d’Internet Explorer est actuellement (juillet 2015) encore médiocre ).

 Go to Google 
 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 .

 Go to Google 

JavaScript

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

  
  

Si c’est l’aspect visuel d’un bouton que vous recherchez dans une balise d’ancrage HTML de base, vous pouvez utiliser le framework Twitter Bootstrap pour formater n’importe lequel des liens / boutons de type HTML communs afin qu’ils apparaissent sous la forme d’un bouton. Veuillez noter les différences visuelles entre la version 2, 3 ou 4 du framework:

 Link    

Apparence de l’échantillon Bootstrap (v4) :

Exemple de sortie des boutons Boostrap v4

Apparence Bootstrap (v3) :

Exemple de sortie des boutons Boostrap v3

Apparence Bootstrap (v2) :

Exemple de sortie des boutons Boostrap v2

Utilisation:

    

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

À partir de HTML5, les boutons prennent en charge l’atsortingbut formaction . Mieux encore, aucun Javascript ni aucune supercherie ne sont nécessaires.

 

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

Comme ça:

  

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

Si vous utilisez un formulaire interne, ajoutez l’atsortingbut type = “reset” avec l’élément button. Cela empêchera l’action du formulaire.

  
 

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

    

https://jsfiddle.net/hj6gob8b/

Y at-il des inconvénients à faire quelque chose comme ceci?

  Schedule  

a.nostyle est une classe qui a votre style de lien (où vous pouvez vous débarrasser du style de lien standard) et span.button est une classe qui a le style pour votre “bouton” (arrière-plan, bordure, dégradé, etc.) .

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

Solution 1: Bouton dans un formulaire.

 

Mais le problème est que dans certaines versions de navigateurs populaires tels que Chrome, Safari et Internet Explorer, il ajoute un point d’interrogation à la fin de l’URL. En d’autres termes, pour le code au-dessus de votre URL, cela ressemblera à 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 d’utilisation d’ Apache Mod_rewrite serait de redirect toutes les requêtes avec un suivi ? à leur URL correspondante sans le ? . Voici un exemple d’utilisation de .htaccess, mais il y a un thread 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 stack utilisés. Donc, un résumé de cette approche:

Avantages:

  1. C’est un vrai bouton, et sémantiquement, cela a du sens.
  2. Comme il s’agit d’un véritable bouton, il agira également comme un véritable bouton (par exemple, comportement déplaçable et / ou imitation d’un clic lorsque vous appuyez sur la barre d’espace).
  3. Pas de JavaScript, pas de style complexe requirejs.

Les inconvénients:

  1. Trailing ? semble moche dans certains navigateurs. Cela peut être corrigé par un hack (dans certains cas) utilisant POST au lieu de GET, mais la méthode la plus propre consiste à avoir une redirection côté serveur. L’inconvénient de la redirection côté serveur est que cela provoquera un appel HTTP supplémentaire pour ces liens à cause de la redirection 304.
  2. Ajoute un élément

    supplémentaire

  3. Le positionnement des éléments lors de l’utilisation de plusieurs formulaires peut être délicat et s’aggraver lorsqu’il s’agit de conceptions réactives. Certaines configurations peuvent devenir impossibles à réaliser avec cette solution en fonction de l’ordre des éléments. Cela peut avoir un impact sur la facilité d’utilisation si la conception est affectée par ce défi.

Solution 2: Utilisation de JavaScript

Vous pouvez utiliser JavaScript pour déclencher onclick et d’autres événements afin de reproduire le comportement d’un lien à l’aide d’un bouton. L’exemple ci-dessous pourrait être amélioré et retiré du HTML, mais c’est simplement pour illustrer l’idée:

  

Avantages:

  1. Simple (pour les besoins de base) et garder la sémantique sans exiger de formulaire supplémentaire.
  2. Comme il s’agit d’un véritable bouton, il agira également comme un véritable bouton (par exemple, comportement déplaçable et / ou imitation d’un clic lorsque vous appuyez sur la barre d’espace).

Les inconvénients:

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

Solution 3: Ancrage (lien) conçu comme un bouton.

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

Avantages:

  1. Simple (pour les besoins de base) et un bon support entre navigateurs.
  2. N’a pas besoin d’un

    pour travailler.

  3. Ne nécessite pas 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 n ° 1. Il ne supportera pas le même comportement que le bouton. Par exemple, les liens réagissent différemment lorsqu’ils sont déplacés. De plus, le déclencheur de lien “barre d’espace” ne fonctionnera pas sans un code JavaScript supplémentaire. Cela va append beaucoup de complexité car les navigateurs ne sont pas cohérents sur la manière dont ils prennent en charge les événements de touches sur les boutons.

Conclusion

La solution n ° 1 ( bouton dans un formulaire ) semble être la plus transparente pour les utilisateurs avec un minimum de travail. Si votre choix n’est pas affecté par ce choix et que l’adaptation côté serveur est possible, c’est une bonne option pour les cas où l’accessibilité est la priorité absolue (par exemple, liens sur une page d’erreur ou messages d’erreur).

Si JavaScript n’est pas un obstacle à vos exigences en matière d’accessibilité, la solution n ° 2 ( JavaScript ) serait préférable à # 1 et # 3.

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

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

Avez-vous envisagé de styliser un lien normal comme un bouton? Vous ne pouvez pas atteindre les boutons spécifiques à l’OS de cette façon, mais c’est toujours le meilleur moyen d’IMO.

En allant de pair avec ce que quelques autres ont ajouté, vous pouvez vous contenter d’utiliser une simple classe CSS sans PHP, sans code jQuery , avec de simples fichiers HTML et CSS.

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; }  Press Here to Go 

C’est ça. Il 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 .

@ Nicolas, a travaillé pour moi car vous n’aviez pas de type="button" cause de quoi il a commencé à se comporter comme un type de soumission..étant donné que j’ai déjà un type de soumission.it n’a pas fonctionné pour moi …. vous pouvez soit append une classe au bouton, soit pour obtenir la mise en page requirejse:

    

Si vous voulez éviter d’avoir à utiliser un formulaire ou une entrée et que vous recherchez un lien par bouton, vous pouvez créer des liens de bouton esthétiques avec un wrapper div, une ancre et une balise h1 . Vous voudrez peut-être cela pour que vous puissiez librement placer le bouton-lien sur votre page. Ceci est particulièrement utile pour centrer horizontalement les boutons et avoir du texte centré verticalement à l’intérieur. Voici comment:

Votre bouton sera composé de trois parties nestedes: un wrapper div, une ancre et un h1, comme ceci:

  

Ensuite, en CSS, votre style devrait ressembler à 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; } 

Voici un jsFiddle pour vérifier et jouer avec.

Avantages de cette configuration: 1. L’affichage div wrapper: block facilite le centrage (en utilisant la marge: 0 auto) et la position (tandis qu’un est en ligne et plus difficile à positionner et impossible à centrer).

  1. Vous pouvez simplement afficher : le bloquer, le déplacer et le définir comme un bouton, mais l’alignement vertical du texte à l’intérieur devient alors difficile.

  2. Cela vous permet d’afficher : inline-table et

    : table-cell, qui vous permet d’utiliser vertical-align: middle sur

    et de le centrer verticalement (ce qui est toujours agréable sur un bouton). Oui, vous pouvez utiliser le remplissage, mais si vous voulez que votre bouton soit redimensionné dynamicment, ce ne sera pas aussi clair.

  3. Parfois, lorsque vous incorporez un dans un div, seul le texte est cliquable, cette configuration permet de cliquer sur tout le bouton.

  4. Vous n’avez pas à gérer les formulaires si vous essayez simplement de passer à une autre page. Les formulaires sont destinés à saisir des informations et doivent être réservés pour cela.

  5. Vous permet de séparer proprement le style de bouton et le style de texte les uns des autres (avantage d’étirement? Bien sûr, mais CSS peut sembler désagréable, il est donc agréable de le décomposer).

Cela m’a définitivement facilité la vie en créant un site Web mobile pour les écrans de taille variable.

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

  

Ensuite, utilisez CSS pour styliser le lien et le bouton, de sorte que le lien occupe tout l’espace du bouton (il n’ya donc pas de clic erroné de la part de l’utilisateur):

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

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

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; } 

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

  1. Utilisez la

    que l’OP commence par. Cela fonctionne très bien, mais il y a parfois un ajout ? à l’URL. Le ? est le principal problème.

  2. Utilisez jQuery / JavaScript pour faire le lien suivant lorsque JavaScript est activé pour cela ? ne se termine pas ajouté à l’URL. Cela se répercutera parfaitement sur la méthode

    pour la très petite fraction des utilisateurs pour lesquels JavaScript n’est pas activé.

  3. Le code JavaScript utilise la délégation d’événements pour que vous puissiez attacher un écouteur d’événement avant que le

    ou le n’existent. J’utilise jQuery dans cet exemple, car il est rapide et facile, mais cela peut aussi être fait en JavaScript.

  4. Le code JavaScript empêche l’action par défaut de se produire et suit le lien indiqué dans l’atsortingbut d’ action

    .

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 (eg submit the form) e.preventDefault(); // Get the URL specified in the form var url = e.target.parentElement.action; window.location = url; }); 
      Form buttons as links    

Pour HTML 5 et bouton stylé avec arrière-plan d’image

En ce qui concerne la réponse de BalusC ,

 

J’avais besoin d’append des variables au bouton et je ne savais pas trop comment. J’ai fini par utiliser le type d’entrée caché . J’ai pensé que cela pourrait être utile pour ceux qui ont trouvé cette page comme moi.

Utilisez-le comme data-href="index.html" dans la balise button .

   

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; } 

Travailler avec JSFiddle ici

Vous pouvez également utiliser un bouton:

Par exemple, dans la syntaxe ASP.NET Core :

 // Some other tags 
// Other tags...

Les personnes ayant répondu à l’aide des atsortingbuts d’un étaient utiles.

MAIS récemment, j’ai rencontré un problème lorsque j’ai utilisé un lien dans un

.

Le bouton est maintenant considéré comme / en tant que bouton d’envoi (HTML5). J’ai essayé de contourner le 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 créez ensuite votre lien avec une balise de classe nommée d’après le style CSS que vous avez créé:

 Link 

Voici un violon:

JS Fiddle

Vous pouvez également définir les boutons type-property sur “button” (cela le fait ne pas soumettre le formulaire), puis l’imbriquer dans un lien (le fait redirect l’utilisateur).

De cette façon, vous pourriez avoir un autre bouton sous la même forme que le formulaire, au cas où vous en auriez besoin. Je pense aussi que cela est préférable dans la plupart des cas à définir la méthode de formulaire et l’action comme un lien (à moins que ce soit un formulaire de recherche, je suppose …)

Exemple:

 

This way the first button redirects the user, while the second submits the form.

Be careful to make sure the button doesn’t sortinggger any action, as that will result in a conflict. Also as Arius pointed out, you should be aware that, for the above reason, this isn’t ssortingctly speaking considered valid HTML, according to the standard. It does however work as expected in Firefox and Chrome, but I haven’t yet tested it for Internet Explorer.

If what you need is that it will look like a button, with emphasis on the gradient image , you can do this:

  Button Text 

If you want to redirect for pages which reside within your website, then then here’s my method – I’ve added the atsortingbute href to the button, and onclick assigned this.getAtsortingbute(‘href’) to document.location.href

** It won’t work if you reference for urls outsite of your domain because of ‘X-Frame-Options’ to ‘sameorigin’.

Exemple de code:

  

In case you want the button to work as a download button

  

Why not just place your button inside of a reference tag eg

  

This seems to work perfectly for me and does not add any %20 tags to the link, just how you want it. I have used a link to google to demonstrate.

You could of course wrap this in a form tag but it is not necessary.

When linking another local file just put it in the same folder and add the file name as the reference. Or specify the location of the file if in is not in the same folder.

  

This does not add any character onto the end of the URL either, however it does have the files project path as the url before ending with the name of the file. par exemple

If my project structure was…

.. denotes a folder – denotes a file while four | denote a sub directory or file in parent folder

..public

| ..html

|

| -main.html

|

| -secondary.html

If I open main.html the URL would be,

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

However, when I clicked the button inside main.html to change to secondary.html, the URL would be,

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

No special characters included at the end of the URL. J’espère que ça aide. By the way – (%20 denotes a space in a URL its encoded and inserted in the place of them.)

Note: The localhost:0000 will obviously not be 0000 you’ll have your own port number there.

Furthermore the ?_ijt=xxxxxxxxxxxxxx at the end off the main.html URL, x is determined by your own connection so obviously will not be equal to mine.

It might seem like I’m stating some really basic points but I just want to explain as best as I can. Thank you for reading and I hope this help someone at the very least. Happy programming.