html - verlinken - link button erstellen




Wie erstelle ich eine HTML-Schaltfläche, die wie ein Link funktioniert? (18)

HTML

Der einfache HTML-Weg besteht darin, ihn in eine <form> schreiben, in der Sie die gewünschte Ziel-URL im action angeben.

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

Legen Sie bei Bedarf CSS- display: inline; auf dem Formular, um es im Fluss mit dem umgebenden Text zu halten. Anstelle von <input type="submit"> im obigen Beispiel können Sie auch <button type="submit"> . Der einzige Unterschied ist, dass das Element <button> Kinder erlaubt.

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

CSS

Wenn CSS zulässig ist, verwenden Sie einfach ein <a> das Sie formatieren, um wie eine Schaltfläche auszusehen, unter anderem mit der Eigenschaft " appearance ( nur die Internet Explorer-Unterstützung ist derzeit (Juli 2015) immer 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 dieser 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 window.location.href .

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

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

Ich würde es auch mögen, also gibt es keine zusätzlichen Charaktere oder Parameter in der URL.

Wie kann ich das erreichen?

Basierend auf den bisher veröffentlichten Antworten mache ich folgendes:

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

Das Problem besteht darin, dass in Safari und Internet Explorer ein Fragezeichen am Ende der URL hinzugefügt wird. Ich muss eine Lösung finden, die am Ende der URL keine Zeichen hinzufügt.

Es gibt zwei andere Lösungen, um dies zu tun: JavaScript verwenden oder einen Link so gestalten, dass er wie eine Schaltfläche aussieht.

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 Zweck eines Links ist es, zu einer anderen Seite zu gehen. Der Versuch, einen Button wie einen Link zu gestalten, ist die falsche Lösung. Mein Vorschlag ist, dass Sie einen Link verwenden und es wie eine Schaltfläche aussehen soll .

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

@ Nicolas, folgendes für mich gearbeitet, wie deins hatte nicht type="button" aufgrund dessen es begann, sich als send type..sind ich bereits einen überliefern type.it hat nicht für mich gearbeitet .... und jetzt Sie können der Schaltfläche entweder Klasse hinzufügen oder <a> , um das gewünschte Layout zu erhalten:

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

Benutzen:

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

Leider ist dieses Markup in HTML5 nicht mehr gültig und wird weder validieren noch immer als potenziell erwartet funktionieren. Verwenden Sie einen anderen Ansatz.


Bezüglich der Antwort von BalusC

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

Ich musste dem Button Variablen hinzufügen und wusste nicht wie. Ich habe am Ende den Eingabe-Typ ausgeblendet . Ich dachte, dass dies für andere hilfreich sein könnte, die diese Seite wie ich selbst gefunden haben.


Eine weitere Option ist das Erstellen einer Verknüpfung 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 zu formatieren, sodass der Link den gesamten Bereich innerhalb der Schaltfläche einnimmt (damit es keinen Fehlklick des Benutzers gibt):

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

Ich habe hier eine Demo erstellt .


Es ist wirklich sehr einfach und ohne Verwendung von Formelementen. Sie können einfach das <a> -Tag mit einer Schaltfläche innerhalb von :) verwenden.

So was:

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

Und es wird die href in die gleiche Seite laden. Willst du eine neue Seite? Verwenden Sie einfach target="_blank" .


Gibt es Nachteile, wenn Sie etwas wie das Folgende tun?

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

Wo a.nostyle ist eine Klasse, die Ihre Link-Styling (wo Sie die Standard-Link-Styling loswerden können) und span.button ist eine Klasse, die das Styling für Ihre "button" (Hintergrund, Grenze, Farbverlauf, etc.) hat .


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

  1. Verwenden Sie die <form method="get"> , mit der das OP beginnt. Das funktioniert wirklich gut, aber manchmal hängt es an ? an die URL. Das ? ist das Hauptproblem.
  2. Verwenden Sie jQuery / JavaScript, um den folgenden Link auszuführen, wenn JavaScript aktiviert ist, so dass ? wird nicht an die URL angehängt. Es wird nahtlos auf die <form> -Methode für den sehr kleinen Anteil von Benutzern zurückgreifen, für die JavaScript nicht aktiviert ist.
  3. Der JavaScript-Code verwendet die Ereignisdelegierung, sodass Sie einen Ereignis-Listener anfügen können, bevor die <form> oder <button> überhaupt existiert. Ich benutze jQuery in diesem Beispiel, weil es schnell und einfach ist, aber es kann auch in 'Vanille' JavaScript gemacht werden.
  4. Der JavaScript-Code verhindert, dass die Standardaktion ausgeführt wird, und folgt dann dem Link, der im action <form> .

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


Sie können die buttons type-property auf "button" setzen (das Formular wird nicht gesendet) und dann innerhalb eines Links verschachteln (so dass der Benutzer umgeleitet wird).

Auf diese Weise können Sie eine andere Schaltfläche in derselben Form verwenden, die das Formular übermittelt, falls dies erforderlich ist. Ich denke auch, dass dies in den meisten Fällen vorzuziehen ist, anstatt die Formularmethode und -aktion als Link zu setzen (es sei denn, es handelt sich um eine Suchmaske ...)

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 um, während die zweite das Formular übergibt.

Achten Sie darauf, dass die Schaltfläche keine Aktion auslöst, da dies zu einem Konflikt führen würde. Wie Sie bereits von Arius erfahren haben, sollten Sie sich bewusst sein, dass dies aus dem oben genannten Grund streng genommen 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 einfach ein Tag um das Element setzen:

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

https://jsfiddle.net/hj6gob8b/


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

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

Wenn Sie eine Schaltfläche erstellen möchten, die überall 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;
}

Wenn es sich um die visuelle Darstellung einer Schaltfläche handelt, nach der Sie in einem einfachen HTML-Anchor-Tag suchen, können Sie das Twitter-Bootstrap- Framework verwenden, um die folgenden allgemeinen HTML-Typ-Links / -Schaltflächen als Schaltflächen zu formatieren. 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) Beispiel Aussehen:

Bootstrap (v3) Beispiel Aussehen:

Bootstrap (v2) Beispiel Aussehen:


Zusammen mit dem, was ein paar andere hinzugefügt haben, können Sie einfach mit einer einfachen CSS-Klasse ohne PHP, ohne jQuery Code, einfachem HTML und CSS auskommen.

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), etc. Für weitere Details, sehen Sie sich die Seite an, auf der ich das gefunden habe .


Also you can use a button:

For example, 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>

If what you need is that it will look like a button, with emphasis on the gradient image , you can do this:

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

    <input type = "submit" name = "submit" onClick= "window.location= 'http://example.com'">

Ich habe das für eine Website benutzt, an der ich gerade arbeite und es funktioniert super! Wenn du ein cooles Styling willst, stelle ich das CSS hier hin.

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

JSFiddle here


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




htmlbutton