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. 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>

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.

<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 .

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 d' apparence de Bootstrap (v3) :

Exemple d' apparence de Bootstrap (v2) :

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.

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

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.

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>

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

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.

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.

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/

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.

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 .

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).

2. 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.

3. 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.

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

5. 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.

6. 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.

@ 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>

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 .

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

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>

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>

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>

si vous utilisez un certificat SSL

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

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

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 .

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.

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.

En JavaScript

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

En HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

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>

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>

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>