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

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

Ich würde es auch mögen, damit die URL keine zusätzlichen Zeichen oder Parameter enthält.

Wie kann ich das erreichen?

Aufgrund der bisher veröffentlichten Antworten mache ich derzeit Folgendes:

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

Hierfür gibt es zwei weitere Lösungen: Verwenden von JavaScript oder Stylen eines Links, um wie eine Schaltfläche auszusehen.

Verwenden von JavaScript:

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

Dies erfordert jedoch offensichtlich JavaScript und ist daher für Screenreader weniger zugänglich. Der Sinn eines Links besteht darin, zu einer anderen Seite zu wechseln. Der Versuch, eine Schaltfläche wie einen Link wirken zu lassen, ist also die falsche Lösung. Mein Vorschlag ist, dass Sie einen Link verwenden und ihn so gestalten, dass er wie eine Schaltfläche aussieht .

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

HTML

Die einfache HTML-Methode besteht darin, sie so <form>einzufügen, dass Sie die gewünschte Ziel-URL im actionAttribut angeben .

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

Legen Sie bei Bedarf CSS display: inline;für das Formular fest, damit es im Fluss mit dem umgebenden Text bleibt. Anstelle des <input type="submit">obigen Beispiels können Sie auch verwenden <button type="submit">. Der einzige Unterschied besteht darin, dass das <button>Element Kinder zulässt.

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

CSS

Wenn CSS zulässig ist, verwenden <a>Sie einfach einen, den Sie so gestalten, dass er wie eine Schaltfläche aussieht, indem Sie unter anderem die appearanceEigenschaft verwenden ( dies wird in Internet Explorer nur nicht unterstützt ).

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

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

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

JavaScript

Wenn JavaScript zulässig ist, setzen Sie die window.location.href.

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

Anstelle des <input type="button">obigen Beispiels können Sie auch verwenden <button>. Der einzige Unterschied besteht darin, dass das <button>Element Kinder zulässt.

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

Beachten Sie, dass das type="button"Attribut wichtig ist, da der Standardwert für den fehlenden Wert der Status der Schaltfläche "Senden" ist .

Wenn es sich um das visuelle Erscheinungsbild einer Schaltfläche handelt, nach der Sie in einem einfachen HTML-Ankertag suchen, können Sie das Twitter Bootstrap- Framework verwenden, um einen der folgenden allgemeinen HTML-Links / Schaltflächen so zu formatieren, dass sie als Schaltfläche angezeigt werden. 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">

Beispiel für ein Bootstrap (v4) -Beispiel:

Beispiel für ein Bootstrap (v3) -Beispiel:

Beispiel für ein Bootstrap (v2) -Beispiel:

Verwenden:

<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 immer wie erwartet. Verwenden Sie einen anderen Ansatz.

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

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

Vorsichtsmaßnahmen

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

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

Es ist eigentlich sehr einfach und ohne Verwendung von Formularelementen. Sie können einfach das <a> -Tag mit einer Schaltfläche im Inneren verwenden :).

So was:

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

Und es wird die href auf die gleiche Seite laden. Willst du eine neue Seite? Einfach benutzen target="_blank".

BEARBEITEN

Ein paar Jahre später, während meine Lösung noch funktioniert, können Sie viel CSS verwenden, damit sie so aussieht, wie Sie es möchten. Dies war nur ein schneller Weg.

Wenn Sie ein Insider-Formular 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>

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

Es scheint drei Lösungen für dieses Problem zu geben (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 über Ihrer URL sieht Ihre URL folgendermaßen aus:

http://someserver/pages2?

Es gibt eine Möglichkeit, dies zu beheben, die jedoch eine serverseitige Konfiguration erfordert. Ein Beispiel für die Verwendung von Apache Mod_rewrite wäre die Umleitung aller Anforderungen mit einem Trailing ?zu ihrer entsprechenden URL ohne die ?. Hier ist ein Beispiel .htaccess verwenden, aber es ist ein Full - Thread hier :

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

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

Vorteile:

1. Dies ist eine echte Schaltfläche, und semantisch macht es Sinn.
2. Da es sich um eine echte Schaltfläche handelt, verhält es sich auch wie eine echte Schaltfläche (z. B. ziehbares Verhalten und / oder Nachahmung eines Klicks beim Drücken der Leertaste, wenn diese aktiv ist).
3. Kein JavaScript, kein komplexer Stil erforderlich.

Nachteile:

1. Trailing ?sieht in einigen Browsern hässlich aus. Dies kann durch einen Hack (in einigen Fällen) mit POST anstelle von GET behoben werden. Der saubere Weg ist jedoch eine serverseitige Umleitung. Der Nachteil bei der serverseitigen Umleitung besteht darin, dass diese Links aufgrund der 304-Umleitung einen zusätzlichen HTTP-Aufruf verursachen.
2. Fügt zusätzliches <form>Element hinzu
3. Die Positionierung von Elementen bei Verwendung mehrerer Formulare kann schwierig sein und wird beim Umgang mit reaktionsschnellen Designs noch schlimmer. Abhängig von der Reihenfolge der Elemente kann es mit dieser Lösung unmöglich werden, ein bestimmtes Layout zu erzielen. Dies kann sich auf die Benutzerfreundlichkeit auswirken, wenn das Design von dieser Herausforderung betroffen ist.

Lösung 2: Verwenden von JavaScript.

Sie können JavaScript verwenden, um einen Klick 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, dient jedoch nur zur Veranschaulichung der Idee:

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

Vorteile:

1. Einfach (für Grundvoraussetzungen) und semantisch, ohne dass ein zusätzliches Formular erforderlich ist.
2. Da es sich um eine echte Schaltfläche handelt, verhält es sich auch wie eine echte Schaltfläche (z. B. ziehbares Verhalten und / oder Nachahmung eines Klicks beim Drücken der Leertaste, wenn diese aktiv ist).

Nachteile:

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

Lösung 3: Anker (Link) im Stil eines Knopfes.

Das Stylen eines Links wie eine Schaltfläche ist relativ einfach und bietet eine ähnliche Erfahrung für verschiedene Browser. Bootstrap macht das, aber es ist auch einfach, es mit einfachen Stilen selbst zu erreichen.

Vorteile:

1. Einfach (für Grundvoraussetzungen) und gute browserübergreifende Unterstützung.
2. Benötigt keine <form>zum Arbeiten.
3. Benötigt kein JavaScript, um zu funktionieren.

Nachteile:

1. Semantik ist irgendwie kaputt, weil Sie eine Schaltfläche möchten, die sich wie ein Link verhält, und keinen Link, der sich wie eine Schaltfläche verhält.
2. Es werden nicht alle Verhaltensweisen von Lösung 1 reproduziert. Es wird nicht das gleiche Verhalten wie bei der Schaltfläche unterstützt. Beispielsweise reagieren Links beim Ziehen unterschiedlich. Auch der Link-Trigger "Leertaste" funktioniert ohne zusätzlichen JavaScript-Code nicht. Dies erhöht die Komplexität erheblich, da die Browser nicht konsistent sind, wie sie keypressEreignisse auf Schaltflächen unterstützen.

Fazit

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

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

Wenn aus irgendeinem Grund die Barrierefreiheit von entscheidender Bedeutung ist (JavaScript ist keine Option), Sie sich jedoch in einer Situation befinden, in der Ihr Design und / oder Ihre Serverkonfiguration Sie daran hindert, Option 1 zu verwenden, dann Lösung 3 ( Anker im Stil einer Schaltfläche ) ist eine gute Alternative, um dieses Problem mit minimalen Auswirkungen auf die Benutzerfreundlichkeit zu lösen.

Warum platzieren Sie Ihre Schaltfläche 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, so wie Sie es möchten. Ich habe einen Link zu Google verwendet, um 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 verknüpfen, legen Sie sie einfach in denselben Ordner und fügen Sie den Dateinamen als Referenz hinzu. Oder geben Sie den Speicherort der Datei an, wenn sich in nicht im selben Ordner befindet.

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

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

Wenn meine Projektstruktur ...

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

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

Wenn ich main.html öffne, lautet die URL:

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

Wenn ich jedoch auf die Schaltfläche in main.html klickte, um zu Secondary.html zu wechseln, lautete die URL wie folgt:

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

Keine Sonderzeichen am Ende der URL. 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 ist offensichtlich nicht 0000, Sie haben dort Ihre eigene Portnummer.

Darüber hinaus wird die? _Ijt = xxxxxxxxxxxxxx am Ende der main.html-URL x durch Ihre eigene Verbindung bestimmt, sodass sie offensichtlich nicht meiner entspricht.

Es mag so aussehen, als würde ich einige wirklich grundlegende Punkte darlegen, aber ich möchte nur so gut wie möglich erklären. Vielen Dank fürs Lesen und ich hoffe, dass dies zumindest jemandem hilft. Viel Spaß beim Programmieren.

Sie können einfach ein Tag um das Element setzen:

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

https://jsfiddle.net/hj6gob8b/

Die einzige Möglichkeit, dies zu tun (mit Ausnahme von BalusCs genialer Formularidee!), Ist das Hinzufügen eines JavaScript- onclickEreignisses zur Schaltfläche, was für die Barrierefreiheit nicht gut ist.

Haben Sie darüber nachgedacht, einen normalen Link wie eine Schaltfläche zu gestalten? Auf diese Weise können Sie keine betriebssystemspezifischen Schaltflächen erreichen, aber IMO ist dies immer noch der beste Weg.

Wenn Sie dem folgen, was einige andere hinzugefügt haben, können Sie einfach eine einfache CSS-Klasse ohne PHP, ohne jQuery- Code, nur einfaches HTML und CSS verwenden.

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 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 Website, auf der ich dies gefunden habe .

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

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

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

Hier ist eine jsFiddle , um es auszuprobieren und damit herumzuspielen .

Vorteile dieses Setups: 1. Das Anzeigen des div-Wrappers: Block erleichtert das Zentrieren (mit Rand: 0 automatisch) und Positionieren (während ein <a> inline und schwieriger zu positionieren ist und nicht zentriert werden kann).

2. Sie können die <a> -Anzeige einfach blockieren, verschieben und als Schaltfläche formatieren, aber dann wird es schwierig, den Text darin vertikal auszurichten.

3. Auf diese Weise können Sie die Anzeige <a> display: inline-table und die Anzeige <h1> display: table-cell erstellen, mit der Sie vertikal ausrichten: middle auf <h1> verwenden und vertikal zentrieren können (was immer gut ist ein Knopf). Ja, Sie könnten Polster verwenden, aber wenn Sie möchten, dass die Größe Ihrer Schaltfläche dynamisch geändert wird, ist dies nicht so sauber.

4. Wenn Sie ein <a> in ein Div einbetten, kann manchmal nur der Text angeklickt werden. Durch dieses Setup kann die gesamte Schaltfläche angeklickt werden.

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

6. Ermöglicht es Ihnen, das Button-Styling und das Text-Styling sauber voneinander zu trennen (Stretch-Vorteil? Sicher, aber CSS kann böse aussehen, so dass es schön ist, es zu zerlegen).

Es hat mir definitiv das Leben erleichtert, eine mobile Website für Bildschirme mit variabler Größe zu gestalten.

@ Nicolas, folgendes hat für mich funktioniert, da deins nicht hatte, type="button"aufgrund dessen es sich als Submit-Typ zu verhalten begann ... da ich bereits einen Submit-Typ habe. Es hat bei mir nicht funktioniert ... und jetzt kannst du entweder eine Klasse hinzufügen zum Button oder <a>zum Abrufen des gewünschten Layouts:

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

Eine andere Möglichkeit besteht darin, einen Link in der Schaltfläche zu erstellen:

<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 nicht falsch klickt):

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

Ich habe hier eine Demo erstellt .

Wenn Sie eine Schaltfläche erstellen möchten, die an einer beliebigen Stelle für eine URL verwendet wird, erstellen Sie eine Schaltflächenklasse 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;
}

Ich weiß, dass viele Antworten eingereicht wurden, aber keine von ihnen 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. Dies funktioniert sehr gut, hängt aber manchmal ein ?an die URL an. Das ?ist das Hauptproblem.
2. Verwenden Sie jQuery / JavaScript, um den folgenden Link auszuführen, wenn JavaScript aktiviert ist, damit er ?nicht an die URL angehängt wird. Es wird nahtlos auf die <form>Methode für den sehr kleinen Teil der Benutzer zurückgreifen, für die JavaScript nicht aktiviert ist.
3. Der JavaScript-Code verwendet die Ereignisdelegierung, sodass Sie einen Ereignis-Listener anhängen können, bevor der <form>oder <button>sogar vorhanden ist. In diesem Beispiel verwende ich jQuery, da es schnell und einfach ist, aber auch in 'Vanilla'-JavaScript ausgeführt werden kann.
4. Der JavaScript-Code verhindert, dass die Standardaktion ausgeführt wird, und folgt dann dem im <form> actionAttribut angegebenen Link .

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 Möglichkeiten, dies zu tun:

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

Für HTML 5 und gestaltete 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>

Sie können auch eine Schaltfläche verwenden:

Beispiel: In der 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>

Wenn Sie ein SSL-Zertifikat verwenden

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

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

ABER vor kurzem bin ich auf ein Problem gestoßen, als ich einen Link in einem verwendet habe<form></form> .

Die Schaltfläche wird jetzt als / als Senden-Schaltfläche (HTML5) betrachtet. Ich habe versucht, mich zurechtzufinden, und habe diese Methode gefunden.

Erstellen Sie eine Schaltfläche im CSS-Stil wie die folgende:

.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 einen neuen: CSS Button Generator

Erstellen Sie dann Ihren Link mit einem Klassen- 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

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

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

JSFiddle hier arbeiten .

Sie können die Schaltflächen auch type-propertyauf "Schaltfläche" setzen (dadurch wird das Formular nicht gesendet) und dann in einem Link verschachtelt (der Benutzer wird umgeleitet).

Auf diese Weise können Sie eine andere Schaltfläche im selben Formular haben, die das Formular sendet, falls dies erforderlich ist. Ich denke auch, dass dies in den meisten Fällen dem Festlegen der Formularmethode und der Aktion als Link vorzuziehen ist (es sei denn, es handelt sich um ein Suchformular, 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 die erste Schaltfläche den Benutzer weiter, während die zweite das Formular sendet.

Stellen Sie sicher, dass die Schaltfläche keine Aktion auslöst, da dies zu einem Konflikt führt. Wie Arius betonte, sollten Sie sich darüber im Klaren sein, dass dies aus dem oben genannten Grund laut Standard nicht als gültiges HTML angesehen wird. Es funktioniert jedoch wie erwartet in Firefox und Chrome, aber ich habe es noch nicht für Internet Explorer getestet.

Sie können Javascript verwenden:

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

</html>

Durch http://www.google.comIhre Website ersetzen und http://vor der URL einfügen.

In JavaScript

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

In HTML

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

Geben Sie Ihre Browserkonsole ein window.locationund drücken enterSie sie. Dann können Sie die klare Vorstellung bekommen, was locationenthält

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

Hier können Sie einen beliebigen Wert einstellen.

Um eine andere Seite umzuleiten, können Sie hrefmit Ihrem Link einen Wert festlegen .

   window.location.href = your link

In Ihrem Fall-

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

Wenn Sie möchten, dass es wie eine Schaltfläche mit Schwerpunkt auf dem Verlaufsbild aussieht , können Sie Folgendes tun:

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

Wenn Sie nach Seiten umleiten möchten, die sich auf Ihrer Website befinden, dann ist hier meine Methode: Ich habe das Attribut href zur Schaltfläche hinzugefügt und mit einem Klick this.getAttribute ('href') zugewiesen. zu document.location.href

** Es funktioniert nicht, wenn Sie aufgrund von 'X-Frame-Optionen' auf 'sameorigin' auf URLs außerhalb Ihrer Domain verweisen.

Beispielcode:

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