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

1909

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>
Andrew
quelle
38
Ändern Sie GET in POST. Niemand scheint das erste Problem des OP angesprochen zu haben, nämlich das ?auf der URL. Dies wird durch das Formular verursacht type="GET", ändern Sie dies in type="POST"und das ?am Ende der URL verschwindet. Dies liegt daran, dass GET alle Variablen in der URL sendet, daher die ?.
Redfox05
11
@ redfox05 Dies funktioniert in einem Kontext, in dem Sie nicht genau wissen, welche Methode Sie für Ihre Seiten akzeptieren. In einem Kontext, in dem Sie Beiträge auf erwarteten Seiten ablehnen, schlägt GETdies fehl. Ich denke immer noch, dass die Verwendung eines Links mit der Einschränkung sinnvoll ist, dass er nicht auf "Leertaste" reagiert, wenn er wie die Schaltfläche aktiv ist. Auch einige Stile und Verhaltensweisen sind unterschiedlich (z. B. ziehbar). Wenn Sie die echte "Button-Link" ?-Erfahrung wünschen, ist es möglicherweise auch eine Option , serverseitige Weiterleitungen für die URL-Fertigstellung zum Entfernen durchzuführen.
Nicolas Bouvrette
1
cssbuttongenerator.com kann nützlich sein, wenn Sie eine Schaltfläche mit css erstellen möchten.
Schnee
1
Ich denke, es ist besser, einen Link zu erstellen, der wie ein Knopf aussieht
yasar
1
Nur ein Hinweis, für mich bedeutet "Schaltfläche wirkt wie Link", dass ich mit der rechten Maustaste klicken und entscheiden kann, ob ich in einem neuen Tab / Fenster öffnen möchte, das mit JS-Lösungen nicht funktioniert ...
Betlista

Antworten:

2106

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.

BalusC
quelle
86
Einfach und nett. Eine gute Lösung. display: inlineZum Formular hinzufügen , um die Schaltfläche im Fluss zu halten.
Pekka
13
Bei einer Safari wird am Ende der URL ein Fragezeichen eingefügt. Gibt es eine Möglichkeit, die der URL nichts hinzufügt?
Andrew
11
@BalusC Gute Lösung, aber wenn es sich in einem anderen Formular (übergeordnetes Formular) befindet, wird durch Drücken dieser Schaltfläche zur Adresse im Formularaktionsattribut des übergeordneten Formulars umgeleitet.
Vladimir
100
Ist es nur ich oder fehlt dem <button> -Tag ein offensichtliches href-Attribut?
14
Sieht einfach und gut aus, kann aber Nebenwirkungen haben, wenn sie nicht richtig berücksichtigt werden. dh Erstellen eines zweiten Formulars in einer Seite, eines verschachtelten Formulars usw.
Tejasvi Hegde
597

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

Adam
quelle
1
@pinouchon Sollte funktionieren. Fenster ist impliziert. Könnte ein IE9-Fehler sein, stackoverflow.com/questions/7690645/…
Adam
12
Es scheint, dass dies nicht immer funktioniert, wenn Sie type = "button" nicht angeben. Sieht aus wie die Schaltfläche wird standardmäßig "senden"
Kenitech
58
Wenn Sie den Link in einem neuen Fenster / Tab öffnen möchten, verwenden Sie: onclick = "window.open (' example.com', '_ blank' );"
Bennos
4
@kenitech richtig, nach Angaben : „Der fehlende Standardwert ist der Senden - Schaltfläche Zustand.“
Niels Keurentjes
4
Der Benutzer kann jedoch nicht mit der rechten Maustaste auf die neue Registerkarte öffnen klicken, damit dies funktioniert. Sie benötigen das
Ankertag
433

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:

Beispielausgabe von Boostrap v4-Tasten

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

Beispielausgabe von Boostrap v3-Tasten

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

Beispielausgabe von Boostrap v2-Tasten

Bern
quelle
46
Scheint ein wenig übertrieben, wenn man einen einzelnen Knopf stylt, oder? Mit Rahmen-, Auffüll-, Hintergrund- und anderen CSS-Effekten können Sie Schaltflächen und Links so gestalten, dass sie ähnlich aussehen, ohne ein ganzes Framework zu übernehmen. Die von Bootstrap verwendete Methode ist gut, die Verwendung von Bootstrap scheint jedoch übertrieben.
Scottkellum
150

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.

RedFilter
quelle
59
@BalusC: Genauso wenig wie diese Seite
Robert Harvey
3
@Rob: das ist nicht mein Problem :) Wirf es auf Meta und schau. Das targetAttribut befindet sich jedoch imo am Rande.
BalusC
128

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

Ewige Stunde
quelle
5
Nur um Informationen zu vervollständigen: formactionist kompatibel seit " IE world " seit Version 10 und höher
Luca Detomi
1
@ Ewige Stunde Wirklich neugierig. Soll es in den Beispielen, die Sie und ich gegeben haben, einen nennenswerten Unterschied zwischen dem Verhalten dieser beiden Formen geben? In diesem speziellen Fall <button formaction>=== <form action>?
Pseudosavant
2
@pseudosavant - Der Unterschied besteht darin, dass Ihre Antwort auf Javascript basiert, um zu funktionieren. In dieser Lösung wird kein Javascript benötigt, es ist direktes HTML.
Ewige Stunde
1
@EternalHour Sorry, ich hätte klarer sein sollen. Natürlich macht der JS meinen anders, aber es ist nur eine progressive Verbesserung. Das Formular wird weiterhin ohne JS an diesen Link gesendet. Ich war neugierig auf das beabsichtigte Verhalten nur der HTML- <form>Code in jedem unserer Beispiele. Ist formactionauf eine buttonder hinzuzufügen , soll ?auf eine leere GET Unterwerfung? In diesem JSBin sieht es so aus, als ob sich der HTML- Code für beide genau gleich verhält.
Pseudosavant
2
Es ist nützlich zu beachten, dass dies nur funktioniert, wenn es von Formular-Tags umbrochen wird. Fand das auf die harte
Tour
57

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.

Lucian Minea
quelle
18
Dies funktioniert zwar, sollte jedoch nicht als Lösung, sondern als Problemumgehung betrachtet werden. Wenn Sie diesen Code über den W3C-Validator übergeben, werden Fehler angezeigt.
Hyder B.
7
Ja, Hyder B., Sie haben Recht, aber Sie sollten auch bedenken, dass die Standards nur rohe Richtlinien sind. Als Programmierer sollten Sie immer über den Tellerrand hinaus denken und Dinge ausprobieren, die nicht im Buch enthalten sind;).
Lucian Minea
Wickeln Sie NIEMALS andere Anker oder Form-Action-Elemente in Anchor.
Roko C. Buljan
Aha, und warum ist das so?
Lucian Minea
Sie sollten verwenden, <button type="button">...damit es nicht standardmäßig als Senden fungiert
Stephen R
39

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>
Saravanabawa
quelle
Nur wenn Sie möchten, dass Ihr Formular zurückgesetzt wird. Verwenden Sietype="button"
Stephen R
27
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
Ghoppe
quelle
8
@Robusto, das war ein bissiger Kommentar über den leeren Raum, der früher dort war :) Dies ist keine gute Lösung, IMO, da es ohne JavaScript nicht funktioniert.
Pekka
1
@ Pekka: yup, und es ist auch nicht einmal gut geformte xhtml
Sean Patrick Floyd
8
Wenn Sie ein Formular verwenden, verwenden Sie einfach eine Übermittlung. Wenn Sie onclick verwenden, warum sollten Sie sich mit dem Formular beschäftigen? -1
NimChimpsky
Es ist kein wohlgeformtes HTML. Das Tag inputhat kein Ending-Tag.
Peter Mortensen
9
@PeterMortensen Gemäß der HTML-Spezifikation ist das inputElement ein ungültiges Element. Es muss ein Start-Tag haben, darf aber kein End-Tag haben.
Ghoppe
27

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.

Nicolas Bouvrette
quelle
21

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.

C. Gadd
quelle
20

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/

Uriahs Victor
quelle
10
Nein, das kannst du nicht. HTML verbietet das Verschachteln im <button>Inneren <a>.
Quentin
5
Dies ist im Wesentlichen die gleiche wie diese Antwort von Jahren zuvor .
Quentin
2
Wenn es es verbietet, warum funktioniert es dann? :) Kein ernsthafter Entwickler achtet auf alles, was der W3C-Validator sagt ... versuchen Sie, Facebook oder Google oder eine riesige Website dort
durchzulassen
3
@UriahsVictor Es mag heute funktionieren, aber eines Tages könnten Browser-Anbieter beschließen, das Verhalten zu ändern, da es nicht gültig ist.
Jacob Alvarez
2
@ UriahsVictor Flash- und Java-Applets waren auch ziemlich häufig.
Jacob Alvarez
17

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.

Pekka
quelle
Ich denke, er spricht nicht nur über Funktionalität (Klick), sondern auch über das Aussehen.
1
@Web Logic yup, deshalb spreche ich davon, den Link so zu gestalten, dass er wie eine Schaltfläche aussieht.
Pekka
6
@ChrisMarisic Die Verwendung von onClick hat viele Nachteile: Es funktioniert nicht, wenn JS deaktiviert ist. Der Benutzer kann weder einen Link in einem neuen Tab / Fenster öffnen noch den Link zur Freigabe in seine Zwischenablage kopieren. Parser und Bots können den Link nicht erkennen und ihm folgen. Browser mit einer "Prefetch" -Funktion erkennen den Link nicht. und viele mehr.
Pekka
2
Obwohl dies gültige Punkte sind, denke ich nicht, dass dies wirklich die Zugänglichkeit betrifft. Meinten Sie Benutzerfreundlichkeit, nicht Zugänglichkeit? In der Webentwicklung ist die Barrierefreiheit normalerweise nur der Frage vorbehalten, ob Benutzer mit Sehbehinderungen Ihre Anwendung gut bedienen können.
Chris Marisic
17

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 .

Artie
quelle
17

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

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

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

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

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

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

MoMo
quelle
Sie erhalten tatsächlich eine vernünftige Schaltfläche ohne CSS
Soren
15

@ 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>
Bhawna Jain
quelle
12

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 .

lukeocom
quelle
6
Beachten Sie, dass die Spezifikation besagt, dass dies nicht gültig ist, da Schaltflächen keine interaktiven Nachkommen enthalten sollten. w3.org/TR/2011/WD-html5-20110525/the-button-element.html
lukeocom
1
Sie beide sind richtig. VS2015 kennzeichnet dies mit einer Warnung: "Element 'a' kann nicht in Element 'Schaltfläche' verschachtelt werden", funktioniert jedoch mit: IE11, Edge, Chrome, Firefox, Safari und mindestens einigen (möglicherweise allen) mobilen Browsern. Verwenden Sie diese Technik also nicht, aber wenn Sie es in der Vergangenheit getan haben, funktioniert sie
vorerst
8

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

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>

pseudosavant
quelle
7

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>

Adnan Toky
quelle
4

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>

Anees Hameed
quelle
5
Wird nicht validiert. Einfügen in validator.w3.org/nu/#textarea gibt Fehler: Das Element Eingang darf nicht als Nachkomme des ein Element erscheinen.
Mark Amery
3

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

Wenn Sie ein SSL-Zertifikat verwenden

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

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

Logan Wayne
quelle
3
Setzen Sie den Schaltflächentyp = "Schaltfläche", damit Sie darauf klicken können, ohne das Formular zu senden.
Blake A. Nichols
2

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 .

Jasch1
quelle
2

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.

Anders Martini
quelle
2
Element 'button' kann nicht in Element 'a' verschachtelt werden.
Arius
nach dem Standard nein, aber meiner Erfahrung nach funktioniert das aber gut. Ich habe es noch nicht ausgiebig browserübergreifend getestet, aber zumindest FF und Chrome scheinen mit dem erwarteten Verhalten gut zurechtzukommen.
Anders Martini
Arius: Lesen Sie ein bisschen nach, experimentieren Sie weiter und stellen Sie fest, dass ein Schaltflächenelement tatsächlich in einem <a> -Element verschachtelt sein kann, solange auf das Schaltflächenelement keine eigene Aktion angewendet wird (da dies offensichtlich zu a führen würde Konflikt - Welche Aktion führt der Browser aus? Die Schaltflächen oder die <a>?). Solange Sie sicherstellen, dass das Schaltflächenelement selbst nach dem Klicken keine Aktion auslöst, sollte dies einwandfrei funktionieren (wahrscheinlich nicht). Dies ist jedoch keine bewährte Methode.)
Anders Martini
4
Es geht nicht um die Möglichkeit. Dies ist nur gegen die HTML5-Spezifikation und das ist alles.
Arius
1

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.

Hayz
quelle
1

In JavaScript

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

In HTML

<button onclick="setLocation('/<whatever>')>GO</button>"
Joshua Michael Waggoner
quelle
1

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>
Nasir Khan
quelle
0

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>
ilans
quelle
0

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>
Meir Gabay
quelle