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

153

Ich verwende ASP.NET. Einige meiner Schaltflächen leiten nur weiter. Ich möchte lieber, dass es sich um normale Links handelt, aber ich möchte nicht, dass meine Benutzer einen großen Unterschied im Erscheinungsbild bemerken. Ich habe Bilder betrachtet, die von Ankern, dh Tags, umhüllt sind, aber ich möchte nicht jedes Mal einen Bildeditor starten müssen, wenn ich den Text auf einer Schaltfläche ändere.

css button MatthewMartin
quelle
2
Siehe die Antwort, die ich für diese Frage akzeptiert habe: stackoverflow.com/questions/547222/…
tvanfosson
Sie können einen Dienst wie diesen verwenden , um das CSS für Sie zu generieren, nachdem Sie einige Aspekte (Farbe, Größe, Schriftart) konfiguriert haben.
Basil Bourque
1
Ich würde antworten, wie man es mit Javascript macht, aber die Frage hat kein "Javascript" -Tag
ilyaigpetrov
2
@ilyaigpetrov mach weiter und poste eine Antwort. Ich habe dieses Q vor 7 Jahren gefragt und es sieht so aus, als ob es ein häufiges Problem ist und die Leute eine Vielzahl von Lösungen brauchten.
Matthew

Antworten:

212

Wenden Sie diese Klasse darauf 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>
Erweitern Sie das Snippet

TStamper
quelle
12
Der Haken dabei ist, dass Sie das Aussehen einer Schaltfläche mit CSS reproduzieren müssen. Leider sehen Schaltflächen in verschiedenen Browsern und verschiedenen Browserversionen unterschiedlich aus. Entweder müssen Sie akzeptieren, dass es in einigen Browsern lustig aussieht, oder Sie müssen eine Menge Code haben, um herauszufinden, welchen Browser und welche Version der Benutzer hat, und einen anderen Stil auswählen. Das ist eine Menge Ärger und könnte beim nächsten Erscheinen einer neuen Version eines Browsers kaputt gehen.
Jay
Dies funktioniert nur, wenn ich es adirekt auf tag ( a {display: block ...}) anwende , was nicht akzeptabel ist. Haben Sie eine Idee, warum das classAttribut im aTag nicht funktioniert? :( Ich benutze Firefox 27. Ich habe es auch versucht a.button {...}und es funktioniert auch nicht.
just_a_girl
1
@Jay Ein Kompromiss könnte darin bestehen, das Styling der <input type="submit">und / oder <button>Elemente so zu definieren , dass sie nicht die Standardeinstellungen des Browsers verwenden ( .buttonsofern möglich), und diese dann mit dem Styling für wie oben abzugleichen . Dies sollte dazu beitragen, die Unterschiede zu verringern, wenn nicht sogar vollständig zu beseitigen, und ist besser als Ihre (unzuverlässige - wie Sie zu Recht sagen) Methode, den Browsertyp und die Browserversion zu ermitteln.
Ollie Bennett
@OllieBennett Richtig: Sie können das Aussehen einer Schaltfläche komplett neu definieren. Ich habe nicht versucht, dies zu tun, nicht sicher, wie viele Aspekte des Stils Sie überschreiben müssen. Klingt nach einem Schmerz, aber nachdem ich ihn nicht ausprobiert habe, kann ich nicht sagen, wie viel Schmerz er im Vergleich zu anderen Optionen hat.
Jay
@CraigGjerdingen Ich mag die Stile, die Sie für .link_button verwendet haben, sehr. Die Verwendung von CSS3 aktualisiert diese Antwort definitiv. Auch die Verwendung von Stilen, die weniger wie die "normalen" Browser-Schaltflächen sind, aber dennoch einen Schaltflächen-Vorteil haben, löst das Problem des Browser-Schnüffelns, ohne (imo) auch die Stile für<input type="submit">
Evan Donovan
128

Warum nicht einfach ein Ankertag 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.

Guanom
quelle
8
@ Dean_Wilson versuchen, für ie6 sorgen zu müssen :(
Robotnik
@feeel Weil es für mich einfacher war, einen einheitlich aussehenden Button zu bekommen. Wenn Sie CSS verwenden, wird es nicht nativ gestaltet. Jemand anderes hatte diese Antwort sowieso schon.
Guanome
1
Ich mag diese Lösung, da Sie nicht mit CSS herumspielen müssen, um den Schaltflächenstil des nativen Browsers nachzuahmen. In Firefox funktionierte es jedoch nur mit <button type="button">. Ohne das type-Attribut würde es immer ein Postback durchführen und den Link ignorieren.
Tobias
@ Pyitoechito Ich bin mir sicher, dass dies der Fall ist, da Chrome und Safari im Webkit sind. Sieht aus wie es jsfiddle.net/9Gt7y
guanome
31
Das Verschachteln von <button> und <a> ist kein gültiger HTML-Code und weist ein undefiniertes Verhalten auf. Eine ausführliche Antwort finden Sie hier stackoverflow.com/questions/6393827/… Wenn es funktioniert, ist es nur ein Zufall.
Odin
36

IMHO gibt es eine bessere und elegantere Lösung. Wenn Ihr Link folgendermaßen lautet:

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

Die entsprechende Schaltfläche sollte folgende sein: 

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

Dieser Ansatz ist einfacher, da einfache HTML-Elemente verwendet werden, sodass er in allen Browsern funktioniert, ohne dass Änderungen vorgenommen werden. Wenn Sie Stile für Ihre Schaltflächen haben, wendet diese Lösung die gleichen Stile kostenlos auf Ihre neue Schaltfläche an.

Raul Luna
quelle
5
Okay, ich habe dies heute getestet. Und es funktioniert hervorragend, wenn Sie keine ASP.NET-Webformulare verwenden. ASP.NET-Webformulare umschließen die gesamte Seite mit einem Formular-Tag, und verschachtelte Formulare scheinen überhaupt nicht zu funktionieren. Sie funktionieren außerhalb des ASP.NET-Formular-Tags. Dies beschränkt sich jedoch auf Links ganz oben und unten.
Matthew
3
Einfach und effektiv. Möglicherweise möchten Sie dem Formularelement den Inline-Stil display: hinzufügen. Andernfalls wird es wie ein Block behandelt, der sich von Schaltfläche / Anker / Eingabe unterscheidet.
Nimrodm
Gute Frage. Das glaube ich auch nicht. Andere hier abgebildete Lösungen funktionieren jedoch nicht mit Googlebot, z. B. die Verwendung eines Schaltflächen-Tags.
Raul Luna
Ich habe dies in Django versucht, aber da die Schaltfläche in einer anderen Form endet, werden die Daten POST, anstatt als Link zu fungieren.
Wobbily_col
1
Sie können die Schaltfläche auch dazu bringen, eine Umleitung in Javascript durchzuführen. aber jetzt ist es kein Link - kann nicht "Linkadresse in Zwischenablage kopieren", mit der mittleren Maustaste in einen neuen Tab öffnen usw., eine Vorschau des Linkziels anzeigen, indem Sie mit der Maus darüber fahren usw.
Alexander Taylor
27

Die CSS3- appearanceEigenschaft bietet eine einfache Möglichkeit, jedes Element (einschließlich eines Ankers) mit den integrierten <button>Stilen eines Browsers zu formatieren:

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>
Erweitern Sie das Snippet

CSS Tricks hat eine schöne Gliederung mit mehr Details dazu. Beachten Sie, dass laut caniuse.com derzeit keine Version von Internet Explorer dies unterstützt .

Kevin Leary
quelle
5
Dies wurde aus der CSS3-Spezifikation entfernt. htmlvalidator.com/help.php?m=1&h=appearance
user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Sie können mit <a>solchen Tags spielen, wenn Sie ihnen eine Blockanzeige geben. Sie können den Rand anpassen, um einen schattigen Effekt und die Hintergrundfarbe für das Tastengefühl zu erzielen :)

Ólafur Waage
quelle
18

Wenn Sie einen schönen Knopf mit abgerundeten Ecken wünschen, 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>
Erweitern Sie das Snippet

Rupsray
quelle
3
Ich habe dies und die Antwort mit dem höchsten Rang zu einer jsFiddle hinzugefügt. Fühlen Sie sich frei, mit jsfiddle.net/5z6ew1m0/6
Craig Gjerdingen
Vielleicht möchten Sie auch ein hinzufügen margin. Ansonsten gute Arbeit beim Styling.
c00000fd
3

Wie TStamper sagte, können Sie einfach die CSS-Klasse darauf anwenden und sie so gestalten. Da CSS die Anzahl der Dinge verbessert, die Sie mit Links tun können, ist dies außergewöhnlich geworden, und es gibt jetzt Designgruppen, die sich nur darauf konzentrieren, fantastisch aussehende CSS-Schaltflächen für Themen usw. zu erstellen.

Sie können beispielsweise Übergänge mit Hintergrundfarbe mithilfe der Eigenschaft -webkit-Transition und der Pseduo-Klassen ausführen. Einige dieser Designs können ziemlich verrückt werden, aber es bietet eine fantastische Alternative zu dem, was in der Vergangenheit möglicherweise mit Flash gemacht worden sein musste.

Zum Beispiel (diese sind meiner Meinung nach umwerfend ), http://tympanus.net/Development/CreativeButtons/ (dies ist eine Reihe von sofort einsatzbereiten Animationen für Schaltflächen mit Quellcode auf der Ursprungsseite ). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (In diesem Sinne haben diese Schaltflächen schöne, aber minimalistische Übergangseffekte und verwenden den neuen "flachen" Designstil.)

Graemeboy
quelle
3

Sie können es mit JavaScript tun:

  1. Holen Sie sich CSS-Stile von echten Schaltflächen mit getComputedStyle(realButton) .
  2. Wenden Sie die Stile auf alle Ihre Links an.

/* javascript, after body is loaded */
'use strict';

{ // Namespace starts (to avoid polluting root namespace).
  
  const btnCssText = window.getComputedStyle(
    document.querySelector('.used-for-btn-css-class')
  ).cssText;
  document.querySelectorAll('.btn').forEach(
    (btn) => {
      
      const _d = btn.style.display; // Hidden buttons should stay hidden.
      btn.style.cssText = btnCssText;
      btn.style.display = _d;
      
    }
  );
  
} // Namespace ends.
<body>
  <h3>Button Styled Links</h3>
  <button class="used-for-btn-css-class" style="display: none"></button>
  <a href="//github.io" class="btn">first</a>
  <a href="//github.io" class="btn">second</a>
  <button>real button</button>
  <script>/* You may put JS here. */</script>
</body>
Erweitern Sie das Snippet

ilyaigpetrov
quelle
2

Sie können eine Standardschaltfläche erstellen und diese dann als Hintergrundbild für einen Link verwenden. Dann können Sie den Text im Link festlegen, ohne das Bild zu ändern.

Die besten Lösungen, wenn Sie keine speziell gerenderte Schaltfläche verwenden, sind die beiden bereits von TStamper und Ólafur Waage angegebenen.

cjk
quelle
2

Viel verspätete Antwort:

Ich habe immer wieder damit gerungen, seit ich anfing, in ASP zu arbeiten. Hier ist das Beste, was ich mir ausgedacht habe:

Konzept: Ich erstelle ein benutzerdefiniertes Steuerelement mit einem Tag. Dann habe ich in die Schaltfläche ein Ereignis onclick eingefügt, das document.location mit JavaScript auf den gewünschten Wert setzt.

Ich habe das Steuerelement ButtonLink aufgerufen, damit ich es leicht bekommen kann, wenn ich mit LinkButton verwechselt werde.

aspx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>

<asp:Button runat="server" ID="button"/>

Code dahinter:

Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl

Dim _url As String
Dim _confirm As String

Public Property NavigateUrl As String
    Get
        Return _url
    End Get
    Set(value As String)
        _url = value
        BuildJs()
    End Set
End Property
Public Property confirm As String
    Get
        Return _confirm
    End Get
    Set(value As String)
        _confirm = value
        BuildJs()
    End Set
End Property
Public Property Text As String
    Get
        Return button.Text
    End Get
    Set(value As String)
        button.Text = value
    End Set
End Property
Public Property enabled As Boolean
    Get
        Return button.Enabled
    End Get
    Set(value As Boolean)
        button.Enabled = value
    End Set
End Property
Public Property CssClass As String
    Get
        Return button.CssClass
    End Get
    Set(value As String)
        button.CssClass = value
    End Set
End Property

Sub BuildJs()
    ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
    ' But it's not that big a deal.
    If String.IsNullOrEmpty(_url) Then
        button.OnClientClick = Nothing
    ElseIf String.IsNullOrEmpty(_confirm) Then
        button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
    Else
        button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
    End If
End Sub
End Class

Vorteile dieses Schemas: Es sieht aus wie eine Kontrolle. Sie schreiben ein einzelnes Tag dafür, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

Die resultierende Schaltfläche ist eine "echte" HTML-Schaltfläche und sieht daher genauso aus wie eine echte Schaltfläche. Sie müssen nicht versuchen, das Aussehen einer Schaltfläche mit CSS zu simulieren, und müssen dann mit verschiedenen Erscheinungsbildern in verschiedenen Browsern kämpfen.

Obwohl die Fähigkeiten begrenzt sind, können Sie sie leicht erweitern, indem Sie weitere Eigenschaften hinzufügen. Es ist wahrscheinlich, dass die meisten Eigenschaften nur an die zugrunde liegende Schaltfläche "übergeben" werden müssen, wie ich es für Text, Aktiviert und CSS-Klasse getan habe.

Wenn jemand eine einfachere, sauberere oder auf andere Weise bessere Lösung hat, würde ich mich freuen, sie zu hören. Das ist ein Schmerz, aber es funktioniert.

Jay
quelle
2

Das habe ich benutzt. Link-Taste ist

<div class="link-button"><a href="/">Example</a></div>

CSS

/* body is sans-serif */ 

.link-button {
    margin-top:15px;
    max-width:90px;
    background-color:#eee;
    border-color:#888888;
    color:#333;
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    align-items:flex-start;
    cursor:default;
    -webkit-appearence: push-button;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit;
    border-color: #000;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    min-height: 30px;
}

.link-button a {
    margin-top:4px;
    display:inline-block;
    text-decoration:none;
    color:#333;
}

.link-button:hover {
    background-color:#888;
}

.link-button:active {
    background-color:#333;
}

.link-button:hover a, .link-button:active a {
    color:#fff;
}
Andrew Howden
quelle
Es sieht allerdings nicht nach einem Knopf aus. Ich weiß nicht, wer dich herabgestimmt hat. Hier ist die JS Geige für den Code , den Sie zur Verfügung gestellt: jsfiddle.net/yajj2x0p
Matthewmartin
2

Wie wäre es mit asp: LinkButton?

Sie können das tun - ich habe einen Linkbutton mithilfe des Eintrags von TStamper wie eine Standardschaltfläche aussehen lassen. Die Unterstreichung wurde unter dem Text angezeigt, als ich trotz der text-decoration: noneEinstellung schwebte .

Ich konnte die Hover-Unterstreichung stoppen, indem ich style="text-decoration: none"im Linkbutton Folgendes hinzufügte:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
Christian
quelle
Linkbutton erstellt etwas, das wie ein Link aussieht, sich aber wie eine Schaltfläche verhält. Die Frage stellt das Gegenteil: etwas, das wie ein Knopf aussieht, aber wie ein Link wirkt.
Jay
2

Mithilfe der Eigenschaften von Rahmen, Farbe und Hintergrundfarbe können Sie einen HTML-Link mit Schaltflächen-Lookalike erstellen!

a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}
<a href="https://stackoverflow.com/

">Open StackOverflow</a>
Erweitern Sie das Snippet

Hoffe das hilft :]

Sree Ramana
quelle
2

Verwenden Sie diese Klasse . Dadurch sieht Ihr Link wie eine Schaltfläche aus, wenn er mit der buttonKlasse auf ein aTag angewendet wird .

oder

HIER IST EIN ANDERES DEMO JSFIDDLE

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}
Muhammad Ashikuzzaman
quelle
1

Ich benutze ein asp:Button:

<asp:Button runat="server"
            OnClientClick="return location='targetPage', true;"
            UseSubmitBehavior="False"
            Text="Button Text Here"
/>

Auf diese Weise ist die Bedienung der Schaltfläche vollständig clientseitig und die Schaltfläche verhält sich wie eine Verknüpfung zur targetPage.

Manus Hand
quelle
Gute Arbeit, um zu zeigen, wie ein asp:Buttonin der Praxis aussieht, damit es anderen Benutzern helfen kann!
Benutzer, der kein Benutzer ist
0 

.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>
Erweitern Sie das Snippet


quelle
0

Verwenden Sie das folgende Snippet.

    .a{
  color: $brn-acc-clr;
  background-color: transparent;
  border-color: #888888;

  &:hover:active{
    outline: none;
    color: #888888;
    border-color: #888888;
  }
  &:fill{
    background-color: #888888;
    color: #fff;
    box-shadow: 0 3px 10px rgba(#888888, 0.5);
    &:hover:active{
      color: #fff;
    }
    &:hover:not(:disabled){
      transform: translateY(-2px);
      background-color: darken(#888888, 4);
    }
  }
}
Himadri Mandal
quelle
0

Einfache Schaltfläche CSS Jetzt können Sie mit Ihrem Editor herumspielen

a {
  display: inline-block;
  background: #000000c9;
  color: #000;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
a:hover {
  background:#000
  cursor: pointer;
  transition: 0.3s ease-in;
}

Link-Tag

<a href="#">Hover me<a>
Codeuix
quelle
-1

Das hat bei mir funktioniert. Es sieht aus wie eine Schaltfläche und verhält sich wie ein Link. Sie können es zum Beispiel mit einem Lesezeichen versehen.

<a href="mypage.aspx?param1=1" style="text-decoration:none;">
    <asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
Andrej Adamenko
quelle