Bir html bağlantısının düğme gibi görünmesini nasıl sağlayabilirim?

154

ASP.NET kullanıyorum, bazı düğmelerim sadece yönlendirmeler yapıyor. Sıradan bağlantılar olmayı tercih ederdim, ancak kullanıcılarımın görünüşte çok fazla fark etmelerini istemiyorum. Bağlantılarla sarılmış görüntüleri düşündüm, yani etiketler, ancak bir düğmedeki metni her değiştirdiğimde bir görüntü düzenleyiciyi tetiklemek istemiyorum.

css  button 
— MatthewMartin
kaynak
2
Bu soru için kabul ettiğim yanıtı görün: stackoverflow.com/questions/547222/…
— tvanfosson
Birkaç özelliği (renk, boyut, yazı tipi) yapılandırdıktan sonra sizin için CSS oluşturmak üzere bunun gibi bir hizmet kullanabilirsiniz .
— Basil Bourque
1
Ben javascript ile bunu nasıl cevap ama soru "javascript" etiketi yok
— ilyaigpetrov
2
@ilyaigpetrov devam et ve bir cevap gönder. Bu Q'yu 7 yıl önce sordum ve bu yaygın bir sorun gibi görünüyor ve insanlar çeşitli çözümlere ihtiyaç duyuyorlar.
— MatthewMartin

Yanıtlar:

214

Bu sınıfı ona uygula

.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>
Snippet'i genişlet

— TStamper
kaynak
13
Buradaki yakalama, bir düğmenin görünümünü CSS ile yeniden oluşturmanızı gerektirmesidir. Ancak maalesef farklı tarayıcılardaki düğmeler ve tarayıcıların farklı sürümleri farklı görünüyor. Bu nedenle, bazı tarayıcılarda komik görünmesini kabul etmelisiniz veya kullanıcının hangi tarayıcıya ve hangi sürüme sahip olduğunu ve farklı bir stil seçtiğini anlamak için bir kod kodunuz var. Bu çok fazla sorun ve bir sonraki tarayıcının yeni bir sürümü çıktığında kırılabilir.
— Jay
Bu yalnızca benim için işe yararsa adoğrudan ( a {display: block ...}) etiketine uygularsam işe yaramaz. Etiket classiçindeki özelliğin neden açalışmadığına dair bir fikriniz var mı? :( Firefox 27 kullanıyorum. Ayrıca denedim a.button {...}ve işe yaramıyor.
— just_a_girl
1
@ <input type="submit">Ve / veya <button>öğelerinin stilini , tarayıcı varsayılanlarını (mümkün olan yerlerde) kullanmamaları için tanımlamak ve daha sonra bunları .buttonyukarıdaki gibi stille eşleştirmek olabilir . Bu, farkları tamamen ortadan kaldırmazsa azaltmaya yardımcı olur ve tarayıcı türünü ve sürümünü koklama yönteminizden (güvenilir olmayan - haklı olarak söylediğiniz gibi) daha iyidir.
— Ollie Bennett
@OllieBennett True: Bir düğmenin görünümünü tamamen yeniden tanımlayabilirsiniz. Bunu yapmaya çalışmadım, stilin kaç yönünü geçersiz kılmak zorunda olduğunuzdan emin değilim. Bir ağrı gibi görünüyor, ama denememişken, diğer seçeneklerle karşılaştırıldığında ne kadar acı olduğunu söyleyemem.
— Jay
@CraigGjerdingen .link_button için kullandığınız stilleri gerçekten seviyorum. CSS3 kullanımı bu cevabı kesinlikle günceller. Ayrıca, "normal" tarayıcı düğmelerine daha az benzeyen, ancak yine de bir düğme uygunluğu olan stilleri kullanmak, (imo) için stilleri yeniden tanımlamak zorunda kalmadan tarayıcı koklama problemini çözer<input type="submit">
— Evan Donovan
128

Neden bir bağlantı etiketini bir düğme öğesinin etrafına sarmıyorsunuz?

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

Bu, IE9 +, Chrome, Safari, Firefox ve muhtemelen Opera için çalışacaktır.

— guanome
kaynak
8
@Dean_Wilson ie6 :(
— Robotnik
@feeel Çünkü tutarlı görünen bir düğme elde etmek benim için daha kolaydı. CSS kullanıyorsanız, yerel stiline sahip olmaz. Zaten başka birisinin bu cevabı vardı.
— guanome
1
Yerli tarayıcının düğme stilini taklit etmeye çalışan CSS ile uğraşmanıza gerek olmadığından bu çözümü seviyorum. Ancak, Firefox'ta sadece ile çalıştım <button type="button">. Type özelliği olmadan her zaman bir geri gönderme yapar ve bağlantıyı yok sayar.
— Tobias
@Pyitoechito Chrome ve Safari'nin web kitinde olduğundan eminim. Görünüşe göre o olacak jsfiddle.net/9Gt7y
— guanome
31
<düğmesi> ve <a> iç içe yerleştirme geçerli bir HTML değil ve tanımlanmamış bir davranışı var. Ayrıntılı cevabı buradan görebilirsiniz stackoverflow.com/questions/6393827/… Çalışırsa, bu sadece bir tesadüf.
— Odin
36

IMHO, daha iyi ve daha zarif bir çözüm var. Bağlantınız bu ise:

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

Karşılık gelen düğme şu olmalıdır: 

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

Bu yaklaşım daha basit çünkü basit html öğeleri kullanıyor, bu yüzden hiçbir şey değiştirmeden tüm tarayıcılarda çalışacak . Dahası, düğmeleriniz için stilleriniz varsa, bu çözüm aynı stilleri yeni düğmenize ücretsiz olarak uygulayacaktır.

— Raul Luna
kaynak
5
Tamam, bugün test ettim .. ve .. ASP.NET web formları kullanmıyorsanız harika çalışıyor. ASP.NET web formları tüm sayfayı bir form etiketine sarar ve iç içe formlar hiç çalışmıyor gibi görünür - ASP.NET form etiketinin dışında çalışır, ancak bu, en üstteki ve en alttaki bağlantıların kullanımını sınırlar.
— MatthewMartin
3
Basit ve etkili. Form öğesine display: satır içi stil eklemek isteyebilirsiniz. Aksi takdirde, düğme / ankraj / girişten farklı bir blok gibi davranılır.
— nimrodm
İyi soru. Ben de öyle düşünmüyorum. Ancak burada tasvir edilen diğer çözümler, örneğin bir düğme etiketi kullanma gibi googlebot ile çalışmaz.
— Raul Luna
Bunu Django'da denedim, ancak düğme başka bir formda sona erdiğinden, bağlantı olarak hareket etmek yerine verileri POST.
— wobbily_col
1
javascript'te bir yönlendirme yapmak için düğmeyi de kullanabilirsiniz. ancak şimdi bir bağlantı değil - "bağlantı adresini panoya kopyalayamaz", yeni sekmede vb. açmak için orta tıklama, fare vb. ile üzerine gelip bağlantı hedefini önizleme
— Alexander Taylor
27

CSS3 appearanceözelliği, herhangi bir öğeyi (çapa dahil) tarayıcının yerleşik <button>stilleriyle biçimlendirmek için basit bir yol sağlar :

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>
Snippet'i genişlet

CSS Tricks , bu konuda daha fazla ayrıntı içeren güzel bir taslağa sahiptir. Caniuse.com'a göre şu anda hiçbir Internet Explorer sürümünün bunu desteklemediğini unutmayın .

— Kevin Leary
kaynak
5
Bu CSS3 spesifikasyonundan çıkarıldı. htmlvalidator.com/help.php?m=1&h=appearance
— user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

<a>Bir blok görüntü verirseniz, bunun gibi etiketlerle oynayabilirsiniz . Bir düğme efekti ve o düğme hissi için arka plan rengi vermek için kenarlığı ayarlayabilirsiniz :)

— Furlafer Ücreti
kaynak
18

Köşeleri yuvarlatılmış güzel bir düğme istiyorsanız, bu sınıfı kullanın:

.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>
Snippet'i genişlet

— rupsray
kaynak
3
Bunu ve bir jsFiddle en yüksek rütbe cevabı ekledim. Etrafında karışıklık çekinmeyin jsfiddle.net/5z6ew1m0/6
— Craig Gjerdingen
Siz de buna bir tane eklemek isteyebilirsiniz margin. Aksi takdirde, iyi bir iş çıkartmak.
— c00000fd
3

TStamper'ın dediği gibi, CSS sınıfını uygulayabilir ve bu şekilde tasarlayabilirsiniz. CSS, bağlantılarla yapabileceğiniz şeylerin sayısını arttırdıkça olağanüstü hale geldi ve şimdi temalar için şaşırtıcı görünümlü CSS düğmeleri oluşturmaya odaklanan tasarım grupları var.

Örneğin, -webkit-transition özelliğini ve pseduo sınıflarını kullanarak arka plan rengiyle geçiş yapabilirsiniz. Bu tasarımlardan bazıları oldukça çılgınca olabilir, ancak geçmişte neler yapılabileceğine, örneğin flaşa harika bir alternatif sunuyor.

Örneğin (bunlar benim görüşüme göre akıllara durgunluk veriyor ), http://tympanus.net/Development/CreativeButtons/ (bu, başlangıç ​​sayfası için kaynak kodu bulunan düğmeler için tamamen hazır animasyonlar serisidir ). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (aynı satırlar boyunca bu düğmeler hoş ama minimalist geçiş efektlerine sahiptir ve yeni "düz" tasarım stilini kullanırlar.)

— graemeboy
kaynak
3

JavaScript ile yapabilirsiniz:

  1. Gerçek düğmenin CSS stillerini edinin getComputedStyle(realButton).
  2. Stilleri tüm bağlantılarınıza uygulayın.

/* 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>
Snippet'i genişlet

— ilyaigpetrov
kaynak
2

Standart bir düğme oluşturabilir ve ardından bağlantı için arka plan resmi olarak kullanabilirsiniz. Ardından bağlantıdaki metni görüntüyü değiştirmeden ayarlayabilirsiniz.

Özel bir render düğmesi yoksa en iyi çözümler TStamper ve furlafur Waage tarafından verilen ikisidir.

— cjk
kaynak
2

Çok geç cevap:

ASP'de çalışmaya başladığımdan beri bununla güreştim. İşte geldim en iyi:

Konsept: Etiketi olan özel bir denetim oluşturuyorum. Sonra düğmeye JavaScript ile istenen değere document.location ayarlayan bir onclick olayı koymak.

Kontrol ButtonLink'i aradım, böylece LinkButton ile karıştırıldığımda kolayca alabilirim.

aspx:

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

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

arkasındaki kod:

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

Bu şemanın avantajları: Bir kontrole benziyor. Bunun için tek bir etiket yazıyorsunuz, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

Ortaya çıkan düğme "gerçek" bir HTML düğmesidir ve gerçek bir düğmeye benzer. CSS ile bir düğmenin görünümünü simüle etmeye ve ardından farklı tarayıcılarda farklı görünümlerle mücadele etmeye çalışmanız gerekmez.

Yetenekler sınırlı olsa da, daha fazla özellik ekleyerek onu kolayca genişletebilirsiniz. Çoğu özellik, metin, etkin ve cssclass için yaptığım gibi, temel düğmeye sadece "geçmek" zorunda kalacak.

Daha basit, daha temiz veya daha iyi bir çözüm varsa, bunu duymaktan mutluluk duyarım. Bu bir acı, ama işe yarıyor.

— alakarga
kaynak
2

Ben bunu kullandım. Bağlantı düğmesi

<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
kaynak
Yine de bir düğmeye benzemiyor. Seni kim indirdi bilmiyorum. Sağladığınız
— MatthewMartin
2

Asp: LinkButton kullanmaya ne dersiniz?

Bunu yapabilirsiniz - TStamper'ın girişini kullanarak standart bir düğme gibi bir bağlantı düğmesi yaptım. Yine de, bu text-decoration: noneayara rağmen fareyle üzerine geldiğimde alt çizgi gösterildi .

Bağlantı düğmesine ekleyerek fareyle üzerine style="text-decoration: none"gelindiğinde durmayı başardım :

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
— Hristiyan
kaynak
Linkbutton, bir linke benzeyen ancak bir düğme gibi davranan bir şey yaratır. Soru tam tersini ister: düğme gibi görünen, ancak bir bağlantı gibi davranan bir şey.
— Jay
2

Kenarlık, renk ve arka plan rengi özelliklerini kullanarak bir düğme benzeri html bağlantısı oluşturabilirsiniz!

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>
Snippet'i genişlet

Bu yardımcı olur umarım :]

— Sree Ramana
kaynak
2

Bu sınıfı kullanın . buttonBir aetiketin üzerindeki sınıfı kullanarak uygulandığında bağlantınızın bir düğme ile aynı görünmesini sağlar .

veya

BURADA BAŞKA BİR 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
kaynak
1

Bir kullanıyorum asp:Button:

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

Bu şekilde, düğmenin çalışması tamamen istemci tarafındadır ve düğme tıpkı bir bağlantı gibi davranır targetPage.

— Manus El
kaynak
asp:ButtonUygulamada neye benzediğini gösteren iyi bir iş , böylece diğer kullanıcılara yardımcı olabilir!
— Kullanıcı olmayan kullanıcı
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>
Snippet'i genişlet

0

Aşağıdaki snippet'i kullanın.

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

Basit düğme css şimdi editör ile oynayabilirsiniz

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

Bağlantı etiketi

<a href="#">Hover me<a>
— codeuix
kaynak
-1

Bu benim için çalıştı. Bir düğme gibi görünüyor ve bir bağlantı gibi davranıyor. Örneğin yer imi koyabilirsiniz.

<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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.