wake-up-neo.net

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

Ich verwende ASP.NET, einige meiner Schaltflächen führen lediglich Weiterleitungen durch. 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 feststellen. Ich habe an Bilder gedacht, die von Ankern umhüllt wurden, d. H. Tags, aber ich möchte nicht jedes Mal einen Bildeditor starten, wenn ich den Text auf einer Schaltfläche ändere.

132
MatthewMartin

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>

189
TStamper

So dumm ich denke das ist, werde ich diese alte Frage posten.

Warum wickeln Sie nicht einfach ein Ankertag um ein Schaltflächenelement.

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

Nachdem ich diesen Beitrag gelesen und die akzeptierte Antwort ausprobiert hatte, ohne das gewünschte Ergebnis zu finden, versuchte ich es oben und bekam genau das, was ich wollte.

HINWEIS

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

115
guanome

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

<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, damit er in allen Browsern funktioniert, ohne etwas zu ändern. Wenn Sie über Stile für Ihre Schaltflächen verfügen, werden diese neuen Styles außerdem kostenlos auf Ihre neue Schaltfläche angewendet. 

31
Raul Luna
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Sie können mit <a>-Tags wie diesem 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 :)

20
Ólafur Waage

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

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

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

19
Kevin Leary

Wenn Sie einen Nice-Button 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>

15
rupsray

Wie TStamper sagte, können Sie die CSS-Klasse einfach darauf anwenden und auf diese Weise entwerfen. Da CSS die Anzahl der Dinge, die Sie mit Verknüpfungen machen können, verbessert, ist es außergewöhnlich geworden, und es gibt mittlerweile Design-Gruppen, die sich darauf konzentrieren, fantastisch aussehende CSS-Schaltflächen für Designs usw. zu erstellen. 

Beispielsweise können Sie Übergänge mit Hintergrundfarbe mithilfe der Eigenschaft -webkit-transition und pseduo-classes durchführen. Einige dieser Designs können ziemlich nussig werden, aber sie bieten eine fantastische Alternative zu dem, was früher vielleicht mit Flash gemacht worden sein musste. 

Zum Beispiel (diese sind meiner Meinung nach umwerfend), http://tympanus.net/Development/CreativeButtons/ (dies ist eine Reihe von völlig abgehobenen Animationen für Schaltflächen, mit Quellcode auf der Ursprungsseite) . http://www.commentredirect.com/make-awesome-flat-buttons-css/ (auf dieselbe Weise haben diese Schaltflächen Nizza, aber minimalistische Übergangseffekte und sie nutzen den neuen "flachen" Designstil.)

3
graemeboy

Viel verspätete Antwort:

Ich habe mit diesem Thema immer wieder gerungen, seit ich angefangen habe, in ASP zu arbeiten. Hier ist das Beste, was ich mir ausgedacht habe:

Konzept: Ich erstelle ein benutzerdefiniertes Steuerelement mit einem Tag. Dann füge ich in der Schaltfläche ein Onclick-Ereignis ein, das document.location mit JavaScript auf den gewünschten Wert setzt.

Ich habe das Steuerelement ButtonLink genannt, so dass ich leicht mit LinkButton verwirrt werden könnte.

aspx:

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

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

code hinter:

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 aus wie eine echte Schaltfläche. Sie müssen nicht versuchen, das Aussehen einer Schaltfläche mit CSS zu simulieren, und müssen sich dann mit verschiedenen Erscheinungsbildern in verschiedenen Browsern herumschlagen.

Während die Fähigkeiten begrenzt sind, können Sie sie leicht erweitern, indem Sie weitere Eigenschaften hinzufügen. Es ist wahrscheinlich, dass die meisten Eigenschaften einfach an die darunter liegende Schaltfläche übergeben werden müssen, wie ich es für Text, enabled und cssclass getan habe.

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

2
Jay

Sie können es mit JavaScript tun:

  1. Mit getComputedStyle(realButton) können Sie die CSS-Stile der echten Schaltfläche ermitteln.
  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>

2
TheNamelessOne

Verwenden Sie diese Klasse. Wenn Ihr Link mit der button-Klasse eines a-Tags angewendet wird, sieht Ihr Link wie eine Schaltfläche aus.

HIER IS DIE DEMO JSFIDDLE

oder 

HIER IS EINE ANDERE 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;
}

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 keinen speziellen gerenderten Button verwenden, sind die beiden, die bereits von TStamper und Ólafur Waage gegeben wurden.

2
cjk

Dadurch wird auch etwas mehr in die Details der CSS aufgenommen und es werden einige Bilder angezeigt:

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

2
GBa

Wie wäre es mit asp: LinkButton? 

Sie können das - ich habe einen Linkbutton mit dem Eintrag von TStamper wie ein Standard-Button aussehen lassen. Unterstrichen wurde unter dem Text angezeigt, obwohl ich trotz der Einstellung text-decoration: none schwebte. 

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

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
2
Christian

Das habe ich benutzt. Link-Schaltfläche 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;
}
1
Andrew Howden

Mithilfe der Eigenschaften für Rahmen, Farbe und Hintergrundfarbe können Sie einen HTML-Link erstellen, der einer Schaltfläche ähnelt!

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>

Hoffe das hilft :]

1
Sree Ramana

Ich benutze einen 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 wirkt wie ein Link zur targetPage.

1
Manus Hand

Einfaches Button-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>
0
internthings

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);
    }
  }
}
0
Himadri Mandal

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

0
user5625080

Das hat bei mir funktioniert. Es sieht aus wie eine Schaltfläche und verhält sich wie eine Verknüpfung. Sie können es beispielsweise 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>
0
Andrej Adamenko