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 que ce soit aussi accessible que possible.
J'aimerais aussi qu'il n'y ait pas de caractères supplémentaires ni de paramètres dans l'URL.
Comment puis-je atteindre cet objectif?
Sur la base des réponses postées jusqu'à présent, je suis en train de faire ceci:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
mais le problème avec ceci 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.
Pour ce faire, il existe deux autres solutions: utiliser JavaScript ou styler un lien pour qu’il ressemble à 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 point d'un lien est d'aller à 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 styler pour ressembler à un bouton .
<a href="/link/to/page2">Continue</a>
HTML
La méthode HTML simple consiste à le placer dans un <form> dans lequel vous spécifiez l'URL cible souhaitée dans l'attribut action.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
Si nécessaire, définissez CSS display: inline; sur le formulaire pour le conserver dans le flux du 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'élément <button> autorise les enfants.
Vous vous attendriez intuitivement à pouvoir utiliser <button href="http://google.com"> de manière analogue à l'élément <a>, mais malheureusement non, cet attribut n'existe pas conformément à la spécification HTML .
CSS
Si CSS est autorisé, utilisez simplement un <a> que vous appelez comme un bouton en utilisant, entre autres, la propriété appearance ( seul le support d'Internet Explorer est (juillet 2015) toujours insuffisant ).
<a href="http://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="http://google.com" class="btn btn-default">Go to Google</a>
JavaScript
Si JavaScript est autorisé, définissez le window.location.href.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
<button onclick="location.href='http://www.example.com'" type="button">
www.example.com</button>S'il s'agit de l'apparence visuelle d'un bouton que vous recherchez dans une balise d'ancrage HTML de base, vous pouvez utiliser le framework Twitter Bootstrap pour formater l'un des liens/boutons de type HTML courants afin qu'il apparaisse 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">
Bootstrap (v4) apparence de l'échantillon:
Bootstrap (v3) apparence de l'échantillon:
Bootstrap (v2) apparence de l'échantillon:
Utilisation:
<a href="http://www.stackoverflow.com/">
<button>Click me</button>
</a>
Malheureusement, ce balisage n'est plus valide dans HTML5 et ne validera pas ni ne fonctionnera toujours comme prévu. Utilisez une autre approche.
À partir de HTML5, les boutons prennent en charge l'attribut formaction. Le meilleur de tous, pas de Javascript ou de ruse est nécessaire.
<form>
<button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>Mises en garde
- Doit être entouré de balises
<form>. <button>type doit être "submit" (ou non spécifié), je ne pouvais pas 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 provoquera 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/fr-fr/docs/Web/HTML/Element/button # Compatibilité_ Browser
C’est très simple et sans utiliser d’éléments 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? Il suffit d'utiliser target="_blank".
Si vous utilisez un formulaire interne, ajoutez l'attribut type = "reset" avec l'élément button. Cela empêchera l'action du formulaire.
<button type="reset" onclick="location.href='http://www.example.com'">
www.example.com
</button>
<form>
<input TYPE="button" VALUE="Home Page"
onclick="window.location.href='http://www.wherever.com'">
</form>
Vous pouvez simplement mettre une balise autour de l'élément:
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
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, c’est que, dans certaines versions des navigateurs populaires tels que Chrome, Safari et Internet Explorer, un point d’interrogation est ajouté à la fin de l’URL. Donc, en d'autres termes, pour le code ci-dessus, votre URL 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 utilisant Apache Mod_rewrite consisterait à rediriger toutes les demandes avec un ? final vers leur URL correspondante sans le ?. Voici un exemple utilisant .htaccess, mais il existe 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:
- C'est un vrai bouton, et sémantiquement c'est logique.
- Puisqu'il s'agit d'un bouton réel, il agira également comme un bouton réel (par exemple, un comportement déplaçable et/ou imiter un clic lorsque vous appuyez sur la barre d'espace lorsqu'il est actif).
- Pas de JavaScript, pas de style complexe requis.
Les inconvénients:
- Traîner
?semble laid dans certains navigateurs. Cela peut être corrigé par un hack (dans certains cas) en utilisant POST au lieu de GET, mais la méthode la plus simple 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 en raison de la redirection 304. - Ajoute un élément
<form>supplémentaire - Le positionnement des éléments lors de l’utilisation de formulaires multiples peut être délicat et s’aggrave encore lorsqu’il s’agit de conceptions réactives. Certains agencements peuvent devenir impossibles à réaliser avec cette solution en fonction de l'ordre des éléments. Cela peut avoir un impact sur la convivialité 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 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:
- Simple (pour les besoins de base) et garder la sémantique tout en ne nécessitant pas de forme supplémentaire.
- Puisqu'il s'agit d'un bouton réel, il agira également comme un bouton réel (par exemple, un comportement déplaçable et/ou imiter un clic lorsque vous appuyez sur la barre d'espace lorsqu'il est actif).
Les inconvénients:
- 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: Anchor (lien) conçu comme un bouton.
Créer 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 à réaliser vous-même en utilisant des styles simples.
Avantages:
- Simple (pour les besoins de base) et bon support multi-navigateurs.
- N'a pas besoin d'un
<form>pour fonctionner. - N'a pas besoin de JavaScript pour fonctionner.
Les inconvénients:
- La sémantique est un peu cassée, car vous voulez un bouton qui agit comme un lien et non pas un lien qui agit comme un bouton.
- Il ne reproduira pas tous les comportements de la solution n ° 1. Il ne supportera pas le même comportement que button. 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 ajouter beaucoup de complexité car les navigateurs ne sont pas cohérents sur la façon dont ils supportent les événements
keypresssur les boutons.
Conclusion
La solution n ° 1 (Bouton dans un formulaire) semble être la solution la plus transparente pour les utilisateurs nécessitant un travail minimal. Si votre mise en page n’est pas affectée par ce choix et que le Tweak côté serveur est réalisable, il s’agit d’une bonne option dans les cas où l’accessibilité est la priorité absolue (liens vers une page d’erreur ou des messages d’erreur, par exemple).
Si JavaScript n'est pas un obstacle à vos exigences en matière d'accessibilité, la solution n ° 2 (JavaScript) sera préférée aux solutions n ° 1 et n ° 3.
Si pour une raison quelconque l'accessibilité est essentielle (JavaScript n'est pas une option) mais que vous vous trouvez dans une situation où votre conception et/ou la configuration de votre serveur vous empêchent d'utiliser l'option n ° 1, la solution n ° 3 (Anchor s'apparente à button) est une bonne alternative pour résoudre ce problème avec un impact minimal sur la convivialité.
Y at-il des inconvénients à faire quelque chose comme ce qui suit?
<a class='nostyle' href='http://www.google.com/'>
<span class='button'>Schedule</span>
</a>
Où 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 de votre "bouton" (fond, bordure, dégradé, etc.).
La seule façon de faire cela (sauf pour l'idée ingénieuse de la forme de BalusC!) Consiste à ajouter un événement JavaScript onclick au bouton, ce qui n'est pas bon pour l'accessibilité.
Avez-vous envisagé de nommer un lien normal comme un bouton? Vous ne pouvez pas obtenir des boutons spécifiques au système d'exploitation de cette façon, mais c'est toujours la meilleure façon, IMO.
En suivant ce que quelques autres ont ajouté, vous pouvez vous déchaîner en utilisant simplement une classe CSS sans PHP, sans jQuery code, simplement en 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;
}
<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 (rayons), etc. Pour plus de détails, voir le site sur lequel j'ai trouvé ceci .
Pourquoi ne pas simplement placer votre bouton dans 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 pas de balises% 20 au lien, mais à votre guise. J'ai utilisé un lien pour google pour démontrer.
Vous pouvez bien sûr envelopper ceci 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 du 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 aucun caractère à la fin de l'URL, cependant, le chemin du projet de fichiers est l'URL avant de se terminer par le nom du fichier. par exemple
Si ma structure de projet était ...
.. désigne un dossier - désigne un fichier .__, alors que quatre | dénoter un sous-répertoire ou un fichier dans le dossier parent
..Publique
|||| ..html
|||| |||| -main.html
|||| |||| -secondaire.html
Si j'ouvre main.html, l'URL serait:
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
Cependant, quand j'ai cliqué sur le bouton dans main.html pour passer à secondary.html, l'URL serait,
http://localhost:0000/public/html/secondary.html
Aucun caractère spécial inclus à la fin de l'URL . J'espère que cela vous aidera . Au fait - (% 20 désigne un espace dans une URL, qu'il soit codé et inséré à la place.)
Note: l'hôte local: 0000 ne sera évidemment pas 0000, vous y aurez votre propre numéro de port.
De plus, le? _Ijt = xxxxxxxxxxxxxxx situé à la fin de l'URL main.html, x étant déterminé par votre propre connexion, il ne sera évidemment pas égal à mien.
Il peut sembler que je soulève des points de base, mais je veux simplement expliquer du mieux que je peux. Merci d'avoir lu et j'espère que cela aidera au moins quelqu'un. Bonne programmation.
@ Nicolas, la suite a fonctionné pour moi car le vôtre n'avait pas type="button" en raison duquel il a commencé à se comporter comme un type de soumission..parce que j'ai déjà un type de soumission, il n'a pas fonctionné pour moi .... et maintenant vous pouvez soit ajouter classe à bouton ou à <a> pour obtenir la mise en page requise:
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
Si vous souhaitez éviter de devoir utiliser un formulaire ou une entrée et rechercher un lien ressemblant à un bouton, vous pouvez créer de beaux liens de bouton avec un wrapper div, une ancre et une balise h1. Vous voudrez peut-être cela pour pouvoir placer librement le lien-bouton autour de votre page. Ceci est particulièrement utile pour centrer les boutons horizontalement et pour insérer du texte verticalement à l'intérieur. Voici comment:
Votre bouton sera composé de trois éléments imbriqués: un wrapper div, une ancre et un h1, comme suit:
<div class="link-button-wrapper">
<a href="your/link/here">
<h1>Button!</h1>
</a>
</div>
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 a jsFiddle pour vérifier et jouer avec.
Avantages de cette configuration: 1. Rendre l'affichage div wrapper: block facilite le centrage (avec une marge: 0 auto) et la position (alors qu'un <a> est en ligne et plus difficile à positionner et impossible à centrer).
Vous pouvez simplement faire en sorte que <a> affiche: bloquez-le, déplacez-le et appelez-le comme un bouton, mais l'alignement vertical du texte à l'intérieur devient alors difficile.
Cela vous permet d’afficher <a> display: inline-table et <h1> display: table-cell, ce 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 le remplissage, mais si vous voulez que votre bouton se redimensionne de manière dynamique, ce ne sera pas aussi propre.
Parfois, lorsque vous incorporez un <a> dans une div, seul le texte est cliquable. Cette configuration rend le bouton entier cliquable.
Vous n'avez pas à traiter de 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 à cette fin.
Vous permet de séparer proprement le style des boutons et celui du texte (avantage d'étirement? Bien sûr, mais CSS peut avoir une apparence désagréable, il est donc agréable de le décomposer).
Cela m'a vraiment simplifié la vie: concevoir un site Web mobile pour des écrans de tailles variables.
Une autre option consiste à créer un lien dans le bouton:
<button type="button"><a href="yourlink.com">Link link</a></button>
Utilisez ensuite CSS pour styler le lien et le bouton, de sorte que le lien occupe tout l'espace disponible dans le bouton (pour éviter tout clic manquant 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 boutons 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 que beaucoup de réponses ont été soumises, mais aucune d’entre elles ne semblait vraiment régler le problème. Voici ma solution à une solution:
- Utilisez la méthode
<form method="get">avec laquelle l'OP commence. Cela fonctionne vraiment bien, mais cela ajoute parfois un?à l'URL. Le?est le problème principal. - Utilisez jQuery/JavaScript pour créer le lien suivant lorsque JavaScript est activé, de sorte que
?ne soit pas ajouté à l'URL. La méthode<form>sera utilisée de manière transparente pour la très petite fraction des utilisateurs pour lesquels JavaScript n'est pas activé. - Le code JavaScript utilise la délégation d'événements afin que vous puissiez attacher un écouteur d'événement avant que le
<form>ou le<button>n'existe. J'utilise jQuery dans cet exemple, car c'est rapide et facile, mais vous pouvez aussi le faire en JavaScript 'Vanilla'. - Le code JavaScript empêche l’action par défaut et suit le lien indiqué dans l’attribut
<form>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 (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>Pour HTML 5 et bouton stylé 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>7 façons de le faire:
- Utiliser
window.location.href = 'URL' - Utilisation de
window.location.replace('URL') - Utiliser
window.location = 'URL' - Utilisation de
window.open('URL') - Utilisation de
window.location.assign('URL') - Utiliser HTML form
- Utilisation de HTML anchor 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>Aussi, vous pouvez utiliser un bouton:
Par exemple, dans 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>
si vous utilisez un certificat SSL
<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>
Je l'ai utilisé pour un site Web sur lequel je travaille actuellement et cela fonctionne très bien !. Si vous voulez un style cool aussi, 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 .
Vous pouvez utiliser javascript:
<html>
<button onclick='window.location = "http://www.google.com"'>
Google
</button>
</html>Remplacez http://www.google.com par votre site Web, assurez-vous d’inclure http:// avant l’URL.
Vous pouvez également définir les boutons type-property sur "bouton" (cela ne permet pas de soumettre le formulaire), puis de le placer dans un lien (le redirige vers l'utilisateur).
De cette façon, vous pourriez avoir un autre bouton dans le même formulaire qui soumet le formulaire, le cas échéant. Je pense également que cela est préférable dans la plupart des cas, plutôt que de définir la méthode du formulaire et l'action comme lien (sauf si c'est 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 envoie le formulaire.
Veillez à ce que le bouton ne déclenche aucune action, car cela entraînerait un conflit. En outre, comme l'a souligné Arius, vous devez savoir que, pour la raison susmentionnée, il ne s'agit pas à proprement parler de HTML valide, conformément à la norme. Cela fonctionne cependant comme prévu dans Firefox et Chrome, mais je ne l’ai pas encore testé pour Internet Explorer.
Les personnes ayant répondu à l'aide d'attributs <a></a> sur un <button></button> ont été utiles.
MAIS puis récemment, j'ai rencontré un problème lorsque j'ai utilisé un lien dans un <form></form>.
Le bouton est maintenant considéré comme/comme un 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 ici: CSS Button Generator
Et créez ensuite votre lien avec une balise class nommée d'après le style CSS que vous avez créé:
<a href='link.php' class='btn-style'>Link</a>
Voici un violon:
Tapez window.location et appuyez sur enter dans la console de votre navigateur. Ensuite, vous pouvez avoir une idée claire de ce que location contient
hash: ""
Host: "stackoverflow.com"
hostname: "stackoverflow.com"
href: "https://stackoverflow.com/questions/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 la valeur href avec votre lien.
window.location.href = your link
Dans ton cas-
<button onclick="window.location.href='www.google.com'">Google</button>
Si vous avez besoin que cela ressemble à un bouton, en mettant l’accent sur l’image dégradée , vous pouvez le faire:
<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
Si vous souhaitez rediriger les pages de votre site Web, voici ma méthode - J'ai ajouté l'attribut href au bouton, puis onclick assigné this.getAttribute ('href'). à document.location.href
** Cela ne fonctionnera pas si vous faites référence aux URL externes de votre domaine en raison de l'option 'X-Frame-Options' à 'sameorigin'.
Exemple de code:
<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
En javascript
setLocation(base: string) {
window.location.href = base;
}
En HTML
<button onclick="setLocation('/<whatever>')>GO</button>"