Cum pot face ca un link html să arate ca un buton? (Programare, Css)

Aplicați-i această clasă

De ce să nu înfășurați pur și simplu o etichetă de ancorare în jurul unui element buton.

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

Acest lucru va funcționa pentru IE9+, Chrome, Safari, Firefox și, probabil, Opera.

IMHO, există o soluție mai bună și mai elegantă. Dacă link-ul dvs. este acesta:

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

Butonul corespunzător ar trebui să fie acesta:

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

Această abordare este mai simplă pentru că folosește elemente html simple, deci va funcționa în toate browserele fără a schimba nimic. În plus, dacă aveți stiluri pentru butoanele dvs., această soluție va aplica gratuit aceleași stiluri noului dvs. buton.

CSS3 appearance oferă o modalitate simplă de a stiliza orice element (inclusiv o ancoră) cu ajutorul proprietății încorporate în browser. <button> stiluri integrate în browser:

Trucuri CSS are o prezentare frumoasă cu mai multe detalii în acest sens. Rețineți că nici o versiune de Internet Explorer nu suportă în prezent acest lucru conform caniuse.com.

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

Vă puteți juca cu <a> etichete ca aceasta dacă le dați o afișare în bloc. Poți ajusta marginea pentru a da un efect asemănător cu o umbră și culoarea de fundal pentru acea senzație de buton 🙂

Dacă doriți un buton frumos cu colțuri rotunjite, atunci folosiți această clasă:

Așa cum a spus TStamper, poți aplica clasa CSS și să o proiectezi în acest fel. Pe măsură ce CSS se îmbunătățește, numărul de lucruri pe care le poți face cu linkurile a devenit extraordinar, iar acum există grupuri de design care se concentrează doar pe crearea de butoane CSS cu aspect uimitor pentru teme și așa mai departe.

De exemplu, puteți face tranziții cu background-color folosind proprietatea -webkit-transition și pseduo-classes. Unele dintre aceste modele pot deveni destul de nebunești, dar oferă o alternativă fantastică la ceea ce în trecut ar fi trebuit să se facă, să zicem, cu flash.

De exemplu (acestea sunt uluitoare în opinia mea),http://tympanus.net/Development/CreativeButtons/ (aceasta este o serie de animații pentru butoane, cu codul sursă pe pagina de origine).http://www.commentredirect.com/make-awesome-flat-buttons-css/ (în aceeași ordine de idei, aceste butoane au efecte de tranziție frumoase, dar minimaliste, și folosesc noul stil de design „flat”).

Puteți face acest lucru cu JavaScript:

1. Obțineți stilurile CSS ale unui buton real cu getComputedStyle(realButton).
2. Aplicați stilurile la toate linkurile dvs.

Ați putea crea un buton standard, apoi să-l utilizați ca imagine de fundal pentru un link. Apoi puteți seta textul din link fără a modifica imaginea.

Cele mai bune soluții, dacă nu aveți un buton special redat, sunt cele două deja date de TStamper și Ólafur Waage.

Acesta intră și el un pic mai mult în detaliile css-ului și vă oferă câteva imagini:

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

Răspuns mult întârziat:

M-am luptat cu această problemă de când am început să lucrez în ASP. Iată cel mai bun lucru pe care l-am găsit:

Concept: Creez un control personalizat care are o etichetă. Apoi, în buton pun un eveniment onclick care setează document.location la valoarea dorită cu JavaScript.

Am numit controlul ButtonLink, pentru a putea fi ușor de confundat cu LinkButton.

aspx:

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

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

codul din spate:

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

Avantajele acestei scheme: Arată ca un control. Scrieți un singur tag pentru el, <ButtonLink id=”mybutton” navigateurl=”blahblah”/>

Butonul rezultat este un buton HTML „real” și, prin urmare, arată exact ca un buton real. Nu trebuie să încercați să simulați aspectul unui buton cu CSS și apoi să vă luptați cu diferite aspecte pe diferite browsere.

Deși abilitățile sunt limitate, puteți să le extindeți cu ușurință adăugând mai multe proprietăți. Probabil că majoritatea proprietăților ar trebui să „treacă” prin butonul de bază, așa cum am făcut pentru text, enabled și cssclass.

Dacă cineva are o soluție mai simplă, mai curată sau mai bună, aș fi bucuros să o aud. Este o pacoste, dar funcționează.

Iată ce am folosit. Butonul de legătură este

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

Ce-ar fi să folosiți asp:LinkButton?

Puteți face asta – am făcut un linkbutton să arate ca un buton standard, folosind intrarea lui TStamper. Sublinierea a apărut sub text atunci când am trecut cu mouse-ul, totuși, în ciuda text-decoration: none setare.

Am reușit să opresc sublinierea la suprapunere adăugând style="text-decoration: none" în interiorul butonului de legătură:

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

Folosind proprietățile border, color și background color puteți crea un link html asemănător unui buton!

Sper că vă ajută :]

Utilizați această clasă. Aceasta va face ca link-ul să arate la fel ca un buton atunci când este aplicat cu ajutorul butonului button pe o clasă a tag.

sau

AICI ESTE UN ALT 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;
}

Eu folosesc un asp:Button:

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

În acest fel, operarea butonului este complet client-side și butonul acționează ca un link către targetPage.

Utilizați fragmentul de mai jos.

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

Buton simplu css acum vă puteți juca cu editorul dvs.

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

Etichetă de legătură

<a href="#">Hover me<a>

Dacă aveți nevoie de un efect cool, hover și umbră; puteți folosi acest lucru:

    .button {
        text-decoration: none;
        padding: 15px 25px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #450775;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #e1d5ed;

    }

    .button:hover {background-color: #220440}

    .button:active {
        background-color: #230545;
        box-shadow: 0 5px #e1d5ed;
        transform: translateY(4px);
    }

Acest lucru a funcționat pentru mine. Arată ca un buton și se comportă ca un link. De exemplu, îl puteți adăuga la favorite.

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

Ce-ar fi să folosiți asp:LinkButton?