Wie kann ich einen HTML-Link wie eine Schaltfläche aussehen lassen?

Question

Wie kann ich einen HTML-Link wie eine Schaltfläche aussehen lassen?

Gefragt el 2 de April, 2009: Wann wurde die Frage gestellt
596068 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich verwende ASP.NET, einige meiner Schaltflächen leiten einfach weiter. Mir wäre es lieber, wenn es normale Links wären, aber ich möchte nicht, dass meine Benutzer einen großen Unterschied im Aussehen bemerken. Ich habe in Erwägung gezogen, Bilder mit Ankern, d. h. Tags, einzubinden, aber ich möchte nicht jedes Mal einen Bildeditor aufrufen müssen, wenn ich den Text einer Schaltfläche ändere.

Gefragt el 2 de April, 2009 von MatthewMartin

2 Stimmen

Siehe die von mir akzeptierte Antwort auf diese Frage: stackoverflow.com/questions/547222/

Kommentiert el 2 de April, 2009 von tvanfosson

0 Stimmen

Sie können einen Dienst nutzen wie diese um das CSS für Sie zu generieren, nachdem Sie einige Aspekte (Farbe, Größe, Schriftart) konfiguriert haben.

Kommentiert el 29 de Dezember, 2014 von Basil Bourque

1 Stimmen

Ich würde antworten, wie man es mit javascript macht, aber die Frage hat keinen "javascript"-Tag

Kommentiert el 4 de Dezember, 2016 von ilyaigpetrov

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

261voto

TStamper Punkte 29478

Wenden Sie diese Klasse auf sie an

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<a href="#" class="button">Example</a>

Beantwortet el 2 de April, 2009 von TStamper (29478 Punkte )

20 Stimmen

Der Haken an der Sache ist, dass man das Aussehen einer Schaltfläche mit CSS nachbilden muss. Doch leider sehen Schaltflächen in verschiedenen Browsern und verschiedenen Versionen von Browsern unterschiedlich aus. Also muss man entweder akzeptieren, dass sie in manchen Browsern komisch aussehen, oder man muss einen Haufen Code schreiben, um herauszufinden, welchen Browser und welche Version der Benutzer hat, und einen anderen Stil wählen. Das ist sehr mühsam und könnte beim nächsten Erscheinen einer neuen Version eines Browsers nicht mehr funktionieren.

Kommentiert el 15 de Dezember, 2013 von Jay

0 Stimmen

Das funktioniert bei mir nur, wenn ich es auf a Tag direkt ( a {display: block ...} ), was nicht akzeptabel ist. Haben Sie eine Ahnung, warum class Attribut innerhalb a Tag funktioniert nicht? :( Ich benutze Firefox 27. Ich habe auch versucht a.button {...} und es funktioniert auch nicht.

Kommentiert el 26 de Februar, 2014 von just_a_girl

1 Stimmen

@Jay ein Kompromiss könnte darin bestehen, das Styling der <input type="submit"> und/oder <button> Elemente, so dass sie nicht die Standardeinstellungen des Browsers verwenden (wo dies möglich ist), und stimmen diese dann mit dem Styling für .button wie oben. Dies sollte dazu beitragen, die Unterschiede zu verringern, wenn nicht sogar vollständig zu beseitigen, und ist besser als Ihre (unzuverlässige - wie Sie richtig sagen) Methode, den Browsertyp und die Version zu erschnüffeln.

Kommentiert el 14 de Marsch, 2014 von Ollie Bennett

Anzeigen 5 weitere Kommentare

Answer 3

172voto

FarFigNewton Punkte 6846

Warum nicht einfach einen Anker-Tag um ein Schaltflächenelement wickeln?

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

Dies funktioniert für IE9+, Chrome, Safari, Firefox und wahrscheinlich Opera.

Beantwortet el 25 de Februar, 2011 von FarFigNewton (6846 Punkte )

9 Stimmen

@Dean_Wilson versuchen, für ie6 zu sorgen :(

Kommentiert el 28 de Juni, 2012 von Robotnik

0 Stimmen

@feeel Weil es für mich einfacher war, eine einheitlich aussehende Schaltfläche zu erhalten. Wenn du CSS verwendest, hat sie kein natives Styling. Diese Antwort hatte sowieso schon jemand anderes.

Kommentiert el 29 de Juni, 2012 von FarFigNewton

1 Stimmen

Mir gefällt diese Lösung, da man nicht mit CSS herumspielen muss, um den Stil der Schaltflächen des nativen Browsers zu imitieren. In Firefox habe ich es jedoch nur mit <button type="button"> . Ohne das Typ-Attribut würde immer ein Postback durchgeführt und der Link ignoriert.

Kommentiert el 29 de November, 2012 von Tobias

Anzeigen 4 weitere Kommentare

Answer 4

45voto

Raul Luna Punkte 1771

IMHO gibt es eine bessere und elegantere Lösung. Wenn Ihr Link ist dies:

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

Die entsprechende Schaltfläche sollte diese sein:

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

Dieser Ansatz ist einfacher, da er einfache HTML-Elemente verwendet, und wird daher funktionieren in allen Browsern ohne etwas zu ändern. Wenn Sie außerdem Stile für Ihre Schaltflächen haben, wird diese Lösung dieselben Stile kostenlos auf Ihre neue Schaltfläche anwenden.

Beantwortet el 6 de Oktober, 2012 von Raul Luna (1771 Punkte )

6 Stimmen

Okay, ich habe das heute getestet und es funktioniert großartig, wenn Sie nicht ASP.NET Webforms verwenden. ASP.NET Webforms wickelt die ganze Seite in einem Formular-Tag und verschachtelte Formulare scheinen überhaupt nicht zu funktionieren - es funktioniert außerhalb von ASP.NET Formular-Tag, aber das begrenzt die Verwendung auf Links ganz oben und unten.

Kommentiert el 9 de Oktober, 2012 von MatthewMartin

4 Stimmen

Einfach und effektiv. Möglicherweise sollten Sie dem Formularelement den Stil display:inline hinzufügen. Andernfalls wird es wie ein Block behandelt, der sich von Schaltflächen, Ankern und Eingaben unterscheidet.

Kommentiert el 30 de Marsch, 2013 von nimrodm

0 Stimmen

Gute Frage. Das glaube ich auch nicht. Aber andere Lösungen, die hier beschrieben werden, funktionieren nicht mit googlebot, zum Beispiel die Verwendung eines Button-Tags.

Kommentiert el 6 de August, 2014 von Raul Luna

Anzeigen 2 weitere Kommentare

Answer 5

35voto

Kevin Leary Punkte 7707

Die CSS3 appearance Eigenschaft bietet eine einfache Möglichkeit, ein beliebiges Element (einschließlich eines Ankers) mit der in den Browser integrierten <button> Stile:

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

<body>
  <a class="btn">CSS Button</a>
</body>

CSS-Tricks hat einen schönen Überblick mit mehr Details dazu. Beachten Sie, dass derzeit keine Version des Internet Explorers diese Funktion unterstützt. laut caniuse.com .

Beantwortet el 26 de Februar, 2016 von Kevin Leary (7707 Punkte )

16 Stimmen

Dies wurde in der CSS3-Spezifikation gestrichen. htmlvalidator.com/help.php?m=1&h=erscheinung

Kommentiert el 9 de Kann, 2018 von user1431356

Answer 6

28voto

rupsray Punkte 441

Wenn Sie eine schöne Schaltfläche mit abgerundeten Ecken haben möchten, dann verwenden Sie diese Klasse:

.link_button {
    -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);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}

<a href="#" class="link_button">Example</a>

Beantwortet el 3 de Dezember, 2013 von rupsray (441 Punkte )

3 Stimmen

Ich habe dies und die höchstrangige Antwort zu einem jsFiddle hinzugefügt. Fühlen Sie sich frei, um herumspielen mit jsfiddle.net/5z6ew1m0/6

Kommentiert el 5 de September, 2014 von Craig Gjerdingen

0 Stimmen

Vielleicht möchten Sie eine margin auch dazu. Ansonsten, gute Arbeit beim Styling.

Kommentiert el 9 de Oktober, 2017 von c00000fd

Wie kann ich einen HTML-Link wie eine Schaltfläche aussehen lassen?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann ich einen HTML-Link wie eine Schaltfläche aussehen lassen?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: