it-swarm.com.de

Wie erstelle ich eine HTML-Schaltfläche, die sich wie ein Link verhält?

Ich möchte eine HTML-Schaltfläche erstellen, die wie ein Link wirkt. Wenn Sie also auf die Schaltfläche klicken, wird auf eine Seite umgeleitet. Ich möchte, dass es so zugänglich wie möglich ist.

Ich möchte es auch so, dass es keine zusätzlichen Zeichen oder Parameter in der URL gibt.

Wie kann ich das erreichen?


Aufgrund der bisherigen Antworten mache ich dies derzeit:

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

das Problem dabei ist jedoch, dass in Safari und Internet Explorer am Ende der URL ein Fragezeichen eingefügt wird. Ich muss eine Lösung finden, die am Ende der URL keine Zeichen hinzufügt.

Es gibt zwei weitere Lösungen, um dies zu tun: Verwenden von JavaScript oder Erstellen eines Links, der wie eine Schaltfläche aussieht.

Verwendung von JavaScript:

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

Dies erfordert jedoch offensichtlich JavaScript und ist daher für Bildschirmleseprogramme weniger zugänglich. Der Sinn eines Links besteht darin, auf eine andere Seite zu wechseln. Wenn Sie versuchen, einen Button als Link zu fungieren, ist dies die falsche Lösung. Mein Vorschlag ist, dass Sie einen Link und Stil verwenden sollten, um wie eine Schaltfläche auszusehen.

<a href="/link/to/page2">Continue</a>
1542
Andrew

HTML

Die einfache HTML-Methode besteht darin, sie in einen <form> zu schreiben, in dem Sie die gewünschte Ziel-URL im action-Attribut angeben.

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

Legen Sie gegebenenfalls CSS display: inline; im Formular fest, um es mit dem umgebenden Text im Fluss zu halten. Anstelle von <input type="submit"> in obigem Beispiel können Sie auch <button type="submit"> verwenden. Der einzige Unterschied ist, dass das <button>-Element untergeordnete Elemente zulässt.

Sie würden intuitiv erwarten, <button href="http://google.com"> analog mit dem <a>-Element verwenden zu können, aber leider nein, dieses Attribut ist gemäß der HTML-Spezifikation nicht vorhanden.

CSS

Wenn CSS zulässig ist, verwenden Sie einfach einen <a>, den Sie so gestalten, dass er wie eine Schaltfläche aussieht, unter anderem mit der Eigenschaft appearance ( nur der Internet Explorer-Support ist derzeit (Juli 2015) noch schlecht ).

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

Oder wählen Sie eine der vielen CSS-Bibliotheken wie Bootstrap .

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

JavaScript

Wenn JavaScript zulässig ist, legen Sie den window.location.href fest.

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

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

475
Adam

Wenn es sich um das visuelle Erscheinungsbild einer Schaltfläche handelt, die Sie in einem einfachen HTML-Ankertag suchen, können Sie das Twitter Bootstrap -Framework verwenden, um die folgenden allgemeinen HTML-Typ-Links Schaltflächen so zu formatieren, dass sie als Schaltfläche erscheinen. Bitte beachten Sie die visuellen Unterschiede zwischen Version 2, 3 oder 4 des Frameworks:

<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) Beispielerscheinung:

Sample output of Boostrap v4 buttons

Bootstrap (v3) Beispielerscheinung:

Sample output of Boostrap v3 buttons

Bootstrap (v2) Beispielerscheinung:

Sample output of Boostrap v2 buttons

421
Bern

Benutzen:

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

Leider ist dieses Markup in HTML5 nicht mehr gültig und wird weder validiert noch funktioniert es wie erwartet. Verwenden Sie einen anderen Ansatz.

137
RedFilter

Ab HTML5 unterstützen Schaltflächen das Attribut formaction. Das Beste ist, dass kein Javascript oder Tricks benötigt wird.

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

Vorbehalte

  • Muss von <form>-Tags umgeben sein.
  • <button> type muss "submit" (oder nicht angegeben) sein, ich konnte es nicht mit type "button" zum Laufen bringen. Was bringt Punkt unten.
  • Überschreibt die Standardaktion in einem Formular. Mit anderen Worten, wenn Sie dies in einer anderen Form tun, führt dies zu einem Konflikt.

Referenz: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Browser-Unterstützung: https://developer.mozilla.org/de-de/docs/Web/HTML/Element/Schaltfläche # Browserkompatibilität

110
EternalHour

Es ist eigentlich sehr einfach und ohne die Verwendung von Formularelementen. Sie können das <a> -Tag einfach mit einem Button :) verwenden.

So was:

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

Die href wird in dieselbe Seite geladen. Willst du eine neue Seite? Verwenden Sie einfach target="_blank".

48
Lucian Minea

Wenn Sie ein Innenformular verwenden, fügen Sie das Attribut type = "reset" zusammen mit dem Schaltflächenelement hinzu. Dadurch wird die Formularaktion verhindert.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>
36
saravanabawa
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
25
ghoppe

Sie können das Element einfach mit einem Tag versehen:

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

https://jsfiddle.net/hj6gob8b/

22
Uriahs Victor

Es gibt scheinbar drei Lösungen für dieses Problem (alle mit Vor- und Nachteilen).

Lösung 1: Schaltfläche in einem Formular.

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

Das Problem dabei ist jedoch, dass in einigen Versionen gängiger Browser wie Chrome, Safari und Internet Explorer am Ende der URL ein Fragezeichen eingefügt wird. Mit anderen Worten, für den Code oben wird Ihre URL so aussehen:

http://someserver/pages2?

Es gibt eine Möglichkeit, das Problem zu beheben, dies erfordert jedoch eine serverseitige Konfiguration. Ein Beispiel für die Verwendung von Apache Mod_rewrite wäre das Umleiten aller Anforderungen mit einem nachgestellten ? an die entsprechende URL ohne den ?. Hier ist ein Beispiel mit .htaccess, aber es gibt einen vollständigen Thread hier :

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

Ähnliche Konfigurationen können je nach verwendetem Webserver und Stack variieren. Also eine Zusammenfassung dieses Ansatzes:

Pros:

  1. Dies ist ein echter Button und semantisch macht es Sinn.
  2. Da es sich um eine echte Schaltfläche handelt, fungiert sie auch als echte Schaltfläche (z. B. schleppbares Verhalten und/oder ein Klick beim Drücken der Leertaste, wenn diese aktiv ist).
  3. Kein JavaScript, kein komplexer Stil erforderlich.

Nachteile:

  1. Das Nachlaufen von ? sieht in einigen Browsern hässlich aus. Dies kann durch einen Hack (in einigen Fällen) mit POST anstelle von GET behoben werden. Die saubere Methode ist jedoch die serverseitige Weiterleitung. Der Nachteil der serverseitigen Umleitung besteht darin, dass aufgrund dieser Umleitung ein zusätzlicher HTTP-Aufruf für diese Links verursacht wird.
  2. Fügt zusätzliches <form>-Element hinzu
  3. Die Positionierung von Elementen bei der Verwendung mehrerer Formulare kann schwierig sein und wird beim Umgang mit responsiven Designs noch schlechter. Je nach Reihenfolge der Elemente kann mit dieser Lösung ein bestimmtes Layout unmöglich zu erreichen sein. Dies kann sich letztlich auf die Benutzerfreundlichkeit auswirken, wenn das Design von dieser Herausforderung betroffen ist.

Lösung 2: Verwenden von JavaScript.

Sie können JavaScript verwenden, um Onclick und andere Ereignisse auszulösen, um das Verhalten eines Links mithilfe einer Schaltfläche nachzuahmen. Das folgende Beispiel könnte verbessert und aus dem HTML-Code entfernt werden, es dient jedoch lediglich der Veranschaulichung der Idee:

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

Pros:

  1. Einfach (für Grundanforderung) und halten Sie semantisch, ohne dass Sie eine zusätzliche Form benötigen.
  2. Da es sich um eine echte Schaltfläche handelt, fungiert sie auch als echte Schaltfläche (z. B. schleppbares Verhalten und/oder ein Klick beim Drücken der Leertaste, wenn diese aktiv ist).

Nachteile:

  1. Benötigt JavaScript, was weniger zugänglich ist. Dies ist nicht ideal für ein Basiselement (Kernelement), z. B. eine Verknüpfung.

Lösung 3: Anker (Link) im Stil einer Schaltfläche.

Einen Link wie eine Schaltfläche gestalten ist relativ einfach und kann für verschiedene Browser ein ähnliches Erlebnis bieten. Bootstrap tut dies, ist aber auch mit einfachen Styles leicht zu erreichen.

Pros:

  1. Einfache (für grundlegende Anforderungen) und gute Browserübergreifende Unterstützung.
  2. Benötigt keinen <form> zur Arbeit.
  3. Benötigt kein JavaScript, um zu funktionieren.

Nachteile:

  1. Semantisch ist irgendwie kaputt, weil Sie eine Schaltfläche wünschen, die sich wie eine Verknüpfung verhält, und nicht eine Verknüpfung, die sich wie eine Schaltfläche verhält.
  2. Es werden nicht alle Verhalten von Lösung # 1 reproduziert. Es wird nicht dasselbe Verhalten wie die Schaltfläche unterstützt. Zum Beispiel reagieren Links beim Ziehen anders. Auch der Link-Auslöser "Leertaste" funktioniert ohne zusätzlichen JavaScript-Code nicht. Dies erhöht die Komplexität, da Browser keypress -Ereignisse für Schaltflächen nicht einheitlich unterstützen.

Fazit

Lösung Nr. 1 (Button in einem Formular) scheint für Benutzer mit minimalem Arbeitsaufwand am transparentesten zu sein. Wenn Ihr Layout durch diese Auswahl nicht beeinflusst wird und die serverseitige Optimierung möglich ist, ist dies eine gute Option für Fälle, in denen die Zugänglichkeit oberste Priorität hat (z. B. Links auf einer Fehlerseite oder Fehlermeldungen).

Wenn JavaScript kein Hindernis für Ihre Erreichbarkeitsanforderungen darstellt, wird Lösung # 2 (JavaScript) gegenüber # 1 und # 3 bevorzugt.

Wenn die Zugänglichkeit aus irgendeinem Grund von entscheidender Bedeutung ist (JavaScript ist keine Option), Sie sich jedoch in einer Situation befinden, in der Sie durch Ihr Design und/oder Ihre Serverkonfiguration die Option # 1 nicht verwenden, dann ist Lösung # 3 (Anchor im Stil von a button) ist eine gute Alternative, um dieses Problem mit minimalen Auswirkungen auf die Benutzerfreundlichkeit zu lösen.

21

Gibt es irgendwelche Nachteile, etwas wie das Folgende zu tun?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Dabei ist a.nostyle eine Klasse mit Link-Styling (bei der Sie das Standard-Link-Styling entfernen können) und span.button ist eine Klasse, die den Stil für Ihren "Button" (Hintergrund, Rand, Farbverlauf usw.) hat.

18
MuffinTheMan

Die einzige Möglichkeit, dies zu tun (mit Ausnahme der genialen Formulierungsidee von BalusC!), Besteht darin, der Schaltfläche ein JavaScript-Ereignis onclick hinzuzufügen. 

Haben Sie überlegt, einen normalen Link wie eine Schaltfläche zu gestalten? Sie können auf diese Weise keine betriebssystemspezifischen Tasten erreichen, aber es ist immer noch der beste Weg, IMO.

16
Pekka 웃

Mit dem, was ein paar andere hinzugefügt haben, können Sie einfach nur eine einfache CSS-Klasse ohne PHP, keinen jQuery - Code verwenden, sondern nur einfachen HTML und CSS.

Erstellen Sie eine CSS-Klasse und fügen Sie sie Ihrem Anker hinzu. Der Code ist unten.

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

Das ist es. Es ist sehr einfach zu tun und lässt Sie so kreativ sein, wie Sie möchten. Sie steuern die Farben, die Größe, die Formen (Radius) usw. Weitere Informationen finden Sie unter der Site, auf der ich dies gefunden habe .

15
artie

Warum platzieren Sie Ihren Button nicht einfach in einem Referenz-Tag, z 

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

Dies scheint perfekt für mich zu funktionieren und fügt dem Link keine% 20-Tags hinzu, wie Sie es möchten. Ich habe einen Link verwendet, um Google zu demonstrieren.

Sie können dies natürlich in ein Formular-Tag einschließen, dies ist jedoch nicht erforderlich.

Wenn Sie eine andere lokale Datei verlinken, legen Sie sie im selben Ordner ab und fügen Sie den Dateinamen als Referenz hinzu. Oder geben Sie den Speicherort der Datei an, wenn sich nicht in demselben Ordner befindet.

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

Dies fügt auch kein Zeichen am Ende der URL hinzu, jedoch hat es den Projektpfad der Dateien als URL, bevor er mit dem Namen der Datei endet. z.B 

Wenn meine Projektstruktur war ...

.. bezeichnet einen Ordner - bezeichnet eine Datei , während vier | bezeichnen ein Unterverzeichnis oder eine Datei im übergeordneten Ordner

..Öffentlichkeit
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Wenn ich main.html öffne, wäre die URL

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

Wenn ich jedoch auf die Schaltfläche in main.html klickte, um zu sekundär.html zu wechseln, würde die URL folgendermaßen lauten: 

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

Keine Sonderzeichen am Ende der URL enthalten .. __ Ich hoffe, das hilft. __ Übrigens - (% 20 bezeichnet ein Leerzeichen in einer URL, das codiert und an deren Stelle eingefügt wird.)

Hinweis: Der localhost: 0000 wird offensichtlich nicht 0000 sein. Dort haben Sie Ihre eigene Portnummer. 

Außerdem ist das? _Ijt = xxxxxxxxxxxxxx am Ende der URL von main.html, x wird von Ihrer eigenen Verbindung bestimmt und ist daher offensichtlich nicht gleich meiner.


Es scheint, als würde ich einige wirklich grundlegende Punkte anführen, aber ich möchte nur so gut wie möglich erklären. Danke fürs Lesen und ich hoffe, das hilft zumindest jemandem. Viel Spaß beim Programmieren.

15
C.Gadd

@ Nicolas, folgendes arbeitete für mich als Deines hatte type="button", aufgrund dessen es anfing, sich als Senden-Typ zu verhalten Klasse zu Button oder zu <a>, um das gewünschte Layout zu erhalten:

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

Wenn Sie vermeiden möchten, ein Formular oder eine Eingabe verwenden zu müssen, und nach einem Button suchen, der auf eine Schaltfläche schaut, können Sie gut aussehende Button-Links mit einem div-Wrapper, einem Anker und einem h1-Tag erstellen. Möglicherweise möchten Sie dies, damit Sie den Link-Button frei um Ihre Seite platzieren können. Dies ist besonders nützlich, wenn Sie Schaltflächen horizontal zentrieren und vertikal zentrierten Text darin haben. Hier ist wie:

Ihr Button besteht aus drei verschachtelten Teilen: einem div-Wrapper, einem Anker und einem h1, wie folgt:

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

In CSS sollte das Styling dann so aussehen:

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

Hier ist a jsFiddle um es auszuprobieren und herumzuspielen.

Vorteile dieses Setups: 1. Die Anzeige des div-Wrapper-Displays macht es einfach, die Mitte (mit Rand: 0 auto) und die Position zu zentrieren (während ein <a> Inline ist und schwerer zu positionieren und nicht zu zentrieren ist).

  1. Sie können einfach die <a> -Anzeige erstellen: blockieren, verschieben und als Schaltfläche gestalten. Der vertikal ausgerichtete Text wird jedoch schwierig.

  2. Auf diese Weise können Sie die <a> -Anzeige: Inline-Tabelle und die <h1> -Anzeige: Tabellenzelle erstellen, in der Sie die vertikale Ausrichtung verwenden können: Mitte auf <h1> und vertikal zentrieren (was immer Nizza ist.) ein Knopf). Ja, Sie können die Auffüllung verwenden, aber wenn Sie möchten, dass die Größe der Schaltfläche dynamisch geändert wird, ist dies nicht so sauber.

  3. Wenn Sie ein <a> in ein Div einbetten, ist manchmal nur der Text anklickbar. Diese Einstellung macht die gesamte Schaltfläche anklickbar.

  4. Sie müssen sich nicht mit Formularen befassen, wenn Sie nur versuchen, auf eine andere Seite zu wechseln. Formulare dienen zur Eingabe von Informationen und sollten dafür reserviert sein.

  5. Erlaubt Ihnen, das Tasten-Styling und das Text-Styling sauber voneinander zu trennen (Dehnungsvorteil? Sicher, aber CSS kann böse aussehen, daher ist es schön, es zu zerlegen).

Es hat mir definitiv die Arbeit erleichtert, eine mobile Website für Bildschirme unterschiedlicher Größe zu gestalten.

13
MoMo

Eine weitere Option ist das Erstellen eines Links in der Schaltfläche:

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

Verwenden Sie dann CSS, um den Link und die Schaltfläche so zu gestalten, dass der Link den gesamten Platz innerhalb der Schaltfläche einnimmt (damit der Benutzer kein falsches Klicken macht):

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

Ich habe hier eine Demo erstellt .

12
lukeocom

Wenn Sie eine Schaltfläche erstellen möchten, die an einer beliebigen Stelle für eine URL verwendet wird, erstellen Sie eine Button-Klasse für einen Anker.

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

Ich weiß, dass viele Antworten eingereicht wurden, aber keine davon schien das Problem wirklich zu lösen. Hier ist meine Einstellung zu einer Lösung:

  1. Verwenden Sie die <form method="get">-Methode, mit der das OP beginnt. Das funktioniert wirklich gut, aber manchmal hängt ein ? an die URL. Der ? ist das Hauptproblem.
  2. Verwenden Sie jQuery/JavaScript, um den folgenden Link auszuführen, wenn JavaScript aktiviert ist, sodass ? nicht an die URL angehängt wird. Für den sehr kleinen Teil der Benutzer, für die JavaScript nicht aktiviert ist, wird nahtlos auf die <form>-Methode zurückgegriffen.
  3. Der JavaScript-Code verwendet die Ereignisdelegierung, sodass Sie einen Ereignislistener anhängen können, bevor <form> oder <button> vorhanden ist. Ich verwende jQuery in diesem Beispiel, weil es schnell und einfach ist, aber es kann auch in "Vanilla" JavaScript ausgeführt werden.
  4. Der JavaScript-Code verhindert, dass die Standardaktion ausgeführt wird, und folgt dann der im Attribut <form>action angegebenen Verknüpfung.

JSBin-Beispiel (Code-Snippet kann Links nicht folgen)

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

Für HTML 5 und gestylte Schaltfläche zusammen mit Bildhintergrund

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

5
Anees Hameed

7 Möglichkeiten dies zu tun:

  1. window.location.href = 'URL' verwenden
  2. Verwenden von window.location.replace('URL')
  3. window.location = 'URL' verwenden
  4. Verwenden von window.open('URL')
  5. Verwenden von window.location.assign('URL')
  6. HTML verwenden form
  7. Verwendung von 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>
3
Adnan Toky

Sie können auch eine Schaltfläche verwenden:

Zum Beispiel in ASP.NET Core-Syntax:

// 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>
3
Elnaz

wenn Sie ein SSL-Zertifikat verwenden

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

Ich habe dies für eine Website verwendet, an der ich gerade arbeite, und es funktioniert großartig! Wenn Sie auch ein cooles Styling wünschen, stelle ich das CSS hier ein.

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

Arbeitet JSFiddle hier .

2
Jasch1

Sie können Javascript verwenden:

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

</html>

Ersetzen Sie http://www.google.com durch Ihre Website. Stellen Sie sicher, dass Sie http:// vor der URL angeben.

1
Hayz

Sie können auch die Schaltflächen type-property auf "button" setzen (dadurch wird das Formular nicht gesendet) und dann in einen Link eingebettet (der Benutzer wird umgeleitet).

Auf diese Weise könnten Sie eine weitere Schaltfläche in demselben Formular verwenden, die das Formular übermittelt, falls dies erforderlich ist. Ich denke auch, dass dies in den meisten Fällen vorzuziehen ist, wenn Sie die Formularmethode und -aktion als Link festlegen (sofern es sich nicht um ein Suchformular handelt, denke ich ...).

Beispiel:

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

Auf diese Weise leitet der erste Button den Benutzer um, während der zweite das Formular übergibt.

Stellen Sie sicher, dass die Schaltfläche keine Aktion auslöst, da dies zu einem Konflikt führt. Wie Arius hervorgehoben hat, sollten Sie sich darüber im Klaren sein, dass dies aus den oben genannten Gründen nicht unbedingt als gültiger HTML-Code betrachtet wird. Es funktioniert jedoch wie erwartet in Firefox und Chrome, aber ich habe es noch nicht für Internet Explorer getestet.

1
Anders Martini

Personen, die mit <a></a>-Attributen auf einen <button></button> geantwortet haben, waren hilfreich.

, ABER dann stieß ich kürzlich auf ein Problem, als ich einen Link in einem <form></form> verwendete.

Die Schaltfläche wird jetzt als/als Senden-Schaltfläche (HTML5) betrachtet. Ich habe versucht, einen Weg zu finden, und habe diese Methode gefunden.

Erstellen Sie einen CSS-Button wie den folgenden:

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

}

Oder erstellen Sie hier eine neue: CSS Button Generator

Erstellen Sie dann Ihren Link mit einem class-Tag, das nach dem von Ihnen erstellten CSS-Stil benannt ist:

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

Hier ist eine Geige:

JS Fiddle

1
Logan Wayne

Geben Sie window.location ein und drücken Sie enter in Ihrer Browserkonsole. Dann können Sie sich klar machen, was location enthält

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

Hier können Sie einen beliebigen Wert einstellen.

Um eine andere Seite umzuleiten, können Sie mit Ihrem Link den Wert href festlegen.

   window.location.href = your link

In Ihrem Fall-

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

Wenn Sie möchten, dass es wie eine Schaltfläche aussieht, mit Betonung des Verlaufsbilds, können Sie Folgendes tun:

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

Wenn Sie nach Seiten umleiten möchten, die sich auf Ihrer Website befinden, dann ist hier meine Methode - Ich habe das Attribut href zum Button hinzugefügt und onclick this.getAttribute ('href') zugewiesen. zur document.location.href

** Es funktioniert nicht, wenn Sie auf "URLs außerhalb Ihrer Domain" verweisen, weil "X-Frame-Optionen" auf "Sameorigin" verweisen.

Beispielcode:

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

In JavaScript

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

In HTML

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