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

MatthewMartin a intrebat.

Folosesc ASP.NET, unele dintre butoanele mele fac doar redirecționări. Aș prefera să fie niște linkuri obișnuite, dar nu vreau ca utilizatorii mei să observe o diferență prea mare în aspect. M-am gândit la imagini înfășurate prin ancore, adică tag-uri, dar nu vreau să fiu nevoit să pornesc un editor de imagini de fiecare dată când schimb textul unui buton.

Comentarii

  • Vedeți răspunsul pe care l-am acceptat pentru această întrebare: stackoverflow.com/questions/547222/… –  > Por tvanfosson.
  • Puteți utiliza un serviciu precum acesta care să genereze CSS-ul pentru dvs. după ce configurați câteva aspecte (culoare, dimensiune, font). –  > Por Basil Bourque.
  • Aș răspunde cum se face cu javascript, dar întrebarea nu are tag-ul „javascript” –  > Por ilyaigpetrov.
  • @ilyaigpetrov dă-i drumul și postează un răspuns. Am întrebat această întrebare acum 7 ani și se pare că este o problemă comună și oamenii au avut nevoie de o varietate de soluții. –  > Por MatthewMartin.
22 răspunsuri
TStamper

Aplicați-i această clasă

Comentarii

    16

  • Capcana este că este nevoie să reproduceți aspectul unui buton cu CSS. Dar, din păcate, butoanele de pe browsere diferite și versiuni diferite de browsere arată diferit. Așa că trebuie fie să acceptați ca butonul să arate ciudat în unele browsere, fie să aveți o grămadă de cod pentru a vă da seama ce browser și ce versiune are utilizatorul și să alegeți un stil diferit. Ceea ce reprezintă o grămadă de probleme și s-ar putea strica la următoarea apariție a unei noi versiuni a unui browser. –  > Por Jay.
  • Acest lucru funcționează pentru mine doar dacă îl aplic la a direct (a {display: block ...}), ceea ce nu este acceptabil. Aveți vreo idee de ce class atributul din interiorul a tag nu funcționează? 🙁 Folosesc Firefox 27. De asemenea, am încercat a.button {...} și nici asta nu funcționează. –  > Por just_a_girl.
  • @Jay un compromis ar putea fi definirea stilizării tag-ului <input type="submit"> și/sau <button> astfel încât acestea să nu folosească valorile implicite ale browserului (acolo unde este posibil), iar apoi să se potrivească acestea cu stilul pentru elementele .button ca mai sus. Acest lucru ar trebui să ajute la reducerea diferențelor, dacă nu le elimină complet, și este mai bun decât metoda ta (nesigură – așa cum bine spui) de a adulmeca tipul și versiunea browserului. –  > Por Ollie Bennett.
  • @OllieBennett Adevărat: Ați putea redefini complet aspectul unui buton. Nu am încercat să fac acest lucru, nu sunt sigur câte aspecte ale stilului trebuie să suprascrieți. Sună ca o durere, dar, nefiind încercat, nu pot spune cât de multă durere este în comparație cu alte opțiuni. –  > Por Jay.
  • @CraigGjerdingen Îmi plac foarte mult stilurile pe care le-ai folosit pentru .link_button. Utilizarea CSS3 actualizează cu siguranță acest răspuns. De asemenea, utilizarea unor stiluri care nu seamănă atât de mult cu butoanele „obișnuite” ale browserului, dar care au în continuare un buton affordance, rezolvă problema mirării browserului fără a fi nevoie (imo) să redefinim și stilurile pentru <input type="submit"> –  > Por Evan Donovan.
FarFigNewton

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.

Comentarii

  • @Dean_Wilson încercați să vă ocupați de ie6 🙁 –  > Por Robotnik.
  • @feeel Pentru că era mai ușor pentru mine să obțin un buton cu aspect consistent. Dacă folosiți CSS, nu va avea stilizare nativă. Oricum altcineva avea deja răspunsul ăsta. –  > Por FarFigNewton.
  • Îmi place această soluție, deoarece nu trebuie să te joci cu CSS încercând să imiți stilul nativ al butonului din browser. Cu toate acestea, în Firefox am reușit să o fac să funcționeze doar cu <button type="button">. Fără atributul type, ar face întotdeauna un postback și ar ignora link-ul. –  > Por Tobias.
  • @Pyitoechito Sunt sigur că da, deoarece Chrome și Safari sunt pe webkit. Se pare că așa va fi jsfiddle.net/9Gt7y –  > Por FarFigNewton.
  • 36

  • Nesting <button> și <a> nu este HTML valid și are un comportament nedefinit. Vedeți răspunsul detaliat aici stackoverflow.com/questions/6393827/… Dacă funcționează, este doar o coincidență. –  > Por Odin.
Raul Luna

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.

Comentarii

  • Bine, am testat această soluție astăzi… și … funcționează foarte bine dacă nu folosiți ASP.NET webforms. ASP.NET webforms înfășoară întreaga pagină într-o etichetă de formular și formularele imbricate nu par să funcționeze deloc… funcționează în afara etichetei de formular ASP.NET, dar asta limitează utilizarea la link-uri în partea de sus și de jos. –  > Por MatthewMartin.
  • Simplu și eficient. S-ar putea să doriți să adăugați stilul display:inline la elementul formular. În caz contrar, acesta este tratat ca un bloc, ceea ce este diferit de buton/ancoră/intrare. –  > Por nimrodm.
  • Bună întrebare. Nici eu nu cred că este așa. Dar alte soluții descrise aici nu vor funcționa cu googlebot, de exemplu cele de a folosi un tag button. –  > Por Raul Luna.
  • Am încercat acest lucru în Django, dar cum butonul ajunge în cadrul unui alt formular, mai degrabă postează datele decât să acționeze ca un link. –  > Por wobbily_col.
  • ai putea, de asemenea, să faci ca butonul să facă o redirecționare în javascript. dar acum nu mai este un link – nu poți „copia adresa linkului în clipboard”, nu poți da click în mijloc pentru a deschide în tab nou etc., nu poți previzualiza ținta linkului trecând cu mouse-ul peste ea etc. –  > Por Alexander Taylor.
Kevin Leary

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.

Comentarii

Ólafur Waage
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 🙂

rupsray

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

Comentarii

  • Am adăugat acest lucru și răspunsul de cel mai înalt rang la un jsFiddle. Simțiți-vă liber să vă jucați cu jsfiddle.net/5z6ew1m0/6 –  > Por Craig Gjerdingen.
  • Este posibil să doriți să adăugați un margin la ea. În caz contrar, o treabă bună de stilizare. –  > Por c00000fd.
graemeboy

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

ilyaigpetrov

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.

cjk

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.

GBa

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/

Jay

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

Andrew Howden

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

Comentarii

  • Totuși, nu prea arată ca un buton. Nu știu cine ți-a dat downvoted. Aici se află fișierul JS pentru codul pe care l-ați furnizat: jsfiddle.net/yajj2x0p –  > Por MatthewMartin.
Christian

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

Comentarii

  • Linkbutton creează ceva care arată ca un link, dar acționează ca un buton. Întrebarea cere opusul: ceva care arată ca un buton, dar acționează ca un link. –  > Por Jay.
Sree Ramana

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

Sper că vă ajută :]

Muhammad Ashikuzzaman

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

Manus Hand

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.

Comentarii

  • Bună treabă, arătând ce înseamnă un asp:Button arată în practică, astfel încât să poată ajuta alți utilizatori! –  > Por ReinstateMonica3167040.
user562505080

Himadri Mandal

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

codeuix

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>

Emeka Augustine

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

Comentarii

  • La început am crezut că acesta nu este un răspuns. Apoi mi-am dat seama că Emeka trebuie să se refere la faptul că link-ul ar trebui să aibă clasa „button” pe el. –  > Por LarsH.
Andrej Adamenko

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>

Vladimir Kocjancic

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

Comentarii

Tags: