Gestalten Sie ein Anchor-Tag so, dass es wie ein Senden-Button aussieht

Lesezeit: 6 Minuten

Gestalten Sie ein Anchor Tag so dass es wie ein Senden Button
Kevin Pang

Ich habe ein Formular, in dem es eine Schaltfläche “Senden” und einen Anker “Abbrechen” gibt. Der HTML-Code ist dieser:

<input type="submit" value="Submit" />
<a href="https://stackoverflow.com/questions/2187008/some_url">Cancel</a>

Ich möchte, dass die beiden gleich aussehen und sich gleich verhalten. Nichts Besonderes, nur etwas Ähnliches wie der Anker “Frage stellen” auf StackOverflow aussieht.

Ich kann die beiden dazu bringen, mit dem Begrenzungsrahmen, der Hintergrundfarbe und der Hover-Hintergrundfarbe etwas ähnlich auszusehen, aber ich kann die Höhe und die vertikale Ausrichtung nicht ganz so hinbekommen, dass sie gut miteinander spielen. Ich würde mein CSS posten, aber es ist an dieser Stelle so ein Durcheinander, dass ich denke, dass es einfacher sein könnte, einfach von vorne anzufangen, ein Barebone-CSS-Layout zum Laufen zu bringen und dann von dort aus weiterzumachen.

PS Ich weiß, dass ich anstelle eines Ankers ein verwenden und das onClick-Ereignis anschließen könnte, um die Umleitung durchzuführen. Es ist an dieser Stelle fast schon eine Grundsatzfrage, dies mit einem Anker richtig zu machen (außerdem gibt es hier Überlegungen zu Webspidern).

  • kann nicht ganz die Höhe und vertikale Ausrichtung bekommen, um gut zu spielen wie sieht es aus? Wie soll es aussehen?

    – Felix Klinge

    2. Februar 10 um 19:38 Uhr

  • Ich möchte nur, dass sie gleich aussehen. Das Problem ist, dass die Höhe des Anchor-Tags nicht in allen Browsern mit der Höhe des Submit-Buttons übereinstimmt. Entweder das, oder sie richten sich nicht perfekt aus, wenn sie nebeneinander platziert werden.

    – Kevin Pang

    2. Februar 2010 um 19:40 Uhr

  • Nur um das klarzustellen, beide sollten wie die Schaltfläche “Frage stellen” in der oberen rechten Ecke von StackOverflow aussehen. Es ist nicht genau das, was ich vorhabe, aber es ist nah genug, um es als Bezugspunkt zu verwenden.

    – Kevin Pang

    2. Februar 10 um 19:43 Uhr

  • Wie möglicherweise zwingen Sie die Überlegungen und Prinzipien von Web-Spidern dazu, nicht dasselbe Element zu verwenden, wenn Sie möchten, dass alles gleich aussieht?

    – Hanan

    2. Februar 10 um 19:52 Uhr

  • @Hanan Weil Webspider Javascript nicht aktiviert haben, werden sie niemals auf die Seite “Abbrechen” klicken, wenn ich den Anker in eine Schaltfläche verwandle.

    – Kevin Pang

    2. Februar 10 um 19:53 Uhr

Das Beste, was Sie mit einfachen Stilen erreichen können, wäre so etwas wie:

.likeabutton {
    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.likeabutton:active {
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

(Möglicherweise mit einer Art Fix, um zu verhindern, dass IE6-IE7 fokussierte Schaltflächen als “aktiv” behandelt.)

Dies sieht jedoch nicht unbedingt genauso aus wie die Schaltflächen auf dem nativen Desktop. In der Tat wird es für viele Desktop-Designs nicht möglich sein, das Aussehen einer Schaltfläche in einfachem CSS zu reproduzieren.

Sie können den Browser jedoch bitten, natives Rendering zu verwenden, was am besten ist:

.likeabutton {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
}

Leider ist dies, wie Sie vielleicht anhand der browserspezifischen Präfixe erraten haben, a CSS3-Funktion das wird noch nicht überall unterstützt. Insbesondere IE und Opera werden es ignorieren. Aber wenn Sie die anderen Stile als Backup einschließen, werden die Browser unterstützt appearance Lassen Sie diese Eigenschaft fallen und bevorzugen Sie die expliziten Hintergründe und Grenzen!

Was Sie tun könnten, ist die Verwendung der appearance Stile standardmäßig wie oben und nehmen Sie bei Bedarf JavaScript-Korrekturen vor, z.

<script type="text/javascript">
    var r= document.documentElement;
    if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) {
        // add styles for background and border colours
        if (/* IE6 or IE7 */)
            // add mousedown, mouseup handlers to push the button in, if you can be bothered
        else
            // add styles for 'active' button
    }
</script>

  • Die akzeptierte Antwort ist wirklich eine direkte Antwort auf die OP-Frage. Aber diese Antwort scheint praktischer anwendbar zu sein.

    – Michail Abdullajew

    3. November 14 um 13:36 Uhr

Ich hoffe, das wird helfen.

<a href="https://stackoverflow.com/questions/2187008/url"><button>SomeText</button></a>

  • stackoverflow.com/questions/802839/…

    – Tachyonen

    18. Februar 15 um 10:27 Uhr

  • Dies ist nicht einmal gültiges HTML. Wie kommt es zu 18 Upvotes?

    – michael

    4. Februar 16 um 5:04 Uhr

  • Funktioniert auf meiner Seite in allen gängigen Browsern, daher bin ich mit dieser unkomplizierten einfachen Lösung zufrieden. Wenn es funktioniert, ist es für meine Zwecke ausreichend.

    – scriptz

    25. Januar 17 um 19:11 Uhr

  • @scriptz Obwohl es funktioniert, wird es als ungültiges HTML betrachtet und früher oder später funktioniert es möglicherweise nicht mehr.

    – Alexandru Severin

    3. August 17 um 13:03 Uhr

Ich schlage vor, dass Sie sowohl Input Submit als auch Button anstelle von Anker verwenden und diese Codezeile einfügen onClick="javascript:location.href="http://stackoverflow.com";"
in diesem Input Submit / Button, den Sie als Link verwenden möchten.

Beispiel einreichen

<input type="submit" value="Submit" onClick="javascript:location.href="https://stackoverflow.com/questions/2187008/some_url";" />

Schaltflächenbeispiel

<button type="button" onClick="javascript:location.href="https://stackoverflow.com/questions/2187008/some_url";" />Submit</button>

Verwendung von CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

<a href="https://stackoverflow.com/questions/2187008/some_url" class="button ">Cancel</a>

Wenn Sie anstelle der Eingabe ein Schaltflächen-Tag verwenden, es zurücksetzen und eine Spanne einfügen, müssen Sie nur noch den Link und die Spanne auf die gleiche Weise gestalten. Es beinhaltet zusätzliches Markup, aber es hat für mich funktioniert.

das Markup:

<button type="submit">
    <span>submit</span>
</button>
<a>cancel</a>

das CSS:

button[type="submit"] {
    display: inline;
    border: none;
    padding: 0;
    background: none;
}

1643772126 226 Gestalten Sie ein Anchor Tag so dass es wie ein Senden Button
Grafikgöttlich

Links und Eingaben sind sehr unterschiedliche Dinge, die für sehr unterschiedliche Zwecke verwendet werden. Sieht für mich so aus, als bräuchtest du eine Taste zum stornieren:

<button>Cancel</button>

Oder vielleicht eine Eingabe:

<input type="button" value="Cancel"/>

Gestalten Sie ein Anchor Tag so dass es wie ein Senden Button
Joel Etherton

Warum nicht einfach einen Button verwenden und die URL mit JavaScript aufrufen?

<input type="button" value="Cancel" onclick="location.href="https://stackoverflow.com/questions/2187008/url.html";return false;" />

  • Web-Spider surfen nicht mit aktiviertem Javascript, so dass sie niemals auf die Cancel-URL treffen. Ich denke, das ist keine große Sache, ich hatte nur gehofft, dass es eine Lösung gibt, die mit einem Anker-Tag funktionieren würde.

    – Kevin Pang

    2. Februar 10 um 19:58 Uhr

  • Es ist nicht das sauberste, aber um die Spider-Überlegung einzubringen, könnten Sie neben der Schaltfläche

    – Joel Etherton

    2. Februar 10 um 20:14 Uhr

.

735890cookie-checkGestalten Sie ein Anchor-Tag so, dass es wie ein Senden-Button aussieht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy