मैं एक HTML लिंक को बटन की तरह कैसे बनाऊं?

154

मैं ASP.NET का उपयोग कर रहा हूँ, मेरे कुछ बटन सिर्फ रीडायरेक्ट करते हैं। इसके बजाय वे साधारण लिंक थे, लेकिन मैं नहीं चाहता कि मेरे उपयोगकर्ता उपस्थिति में बहुत अंतर देखें। मैं एंकर द्वारा लिपटे चित्रों पर विचार करता था, अर्थात टैग, लेकिन मैं हर बार एक बटन पर पाठ को बदलने के लिए एक छवि संपादक को फायर करना नहीं चाहता।

css  button 
— MatthewMartin
स्रोत
2
इस प्रश्न के लिए मैंने जो प्रतिक्रिया स्वीकार की है, उसे देखें: stackoverflow.com/questions/547222/…
— tvanfosson
कुछ पहलुओं (रंग, आकार, फ़ॉन्ट) को कॉन्फ़िगर करने के बाद आप अपने लिए सीएसएस उत्पन्न करने के लिए इस जैसे एक सेवा का उपयोग कर सकते हैं ।
— तुलसी बॉर्क
1
मैं उत्तर दूंगा कि इसे कैसे जावास्क्रिप्ट के साथ करना है लेकिन प्रश्न का कोई "जावास्क्रिप्ट" टैग नहीं है
— ilyaigpetrov
2
@ilyaigpetrov आगे बढ़ो और एक उत्तर पोस्ट करें। मैंने 7 साल पहले यह प्रश्न पूछा था और ऐसा लगता है कि यह एक आम समस्या है और लोगों को कई तरह के समाधानों की आवश्यकता है।
— मैथ्मार्टिन

जवाबों:

214

इस वर्ग को इसके लिए लागू करें

.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>
स्निपेट का विस्तार करें

— TStamper
स्रोत
13
इस के लिए पकड़ यह है कि यह आपको सीएसएस के साथ एक बटन के रूप को पुन: पेश करने की आवश्यकता है। लेकिन दुर्भाग्य से विभिन्न ब्राउज़रों के बटन और ब्राउज़र के विभिन्न संस्करण अलग-अलग दिखते हैं। इसलिए आपको या तो इसे कुछ ब्राउज़रों में मज़ेदार दिखना होगा, या यह पता लगाने के लिए कोड का एक गुच्छा होगा कि कौन सा ब्राउज़र है और उपयोगकर्ता किस संस्करण का चयन करता है और एक अलग शैली चुनता है। जो पूरी तरह से परेशानी का सबब है, और अगली बार एक ब्राउज़र का नया संस्करण सामने आने पर टूट सकता है।
— Jay
यह केवल मेरे लिए काम करता है अगर मैं इसे aसीधे टैग करने के लिए लागू करता हूं ( a {display: block ...}), जो स्वीकार्य नहीं है। क्या आपके पास कोई विचार है कि टैग के classअंदर विशेषता क्यों aकाम नहीं करेगी? :( मैं फ़ायरफ़ॉक्स 27 का उपयोग कर रहा हूँ। मैंने भी कोशिश की a.button {...}और यह भी काम नहीं करता है।
— just_a_girl
1
@Jay <input type="submit">और / या <button>तत्वों की स्टाइल को परिभाषित करने के लिए एक समझौता हो सकता है ताकि वे ब्राउज़र डिफॉल्ट्स (जहां संभव हो) का उपयोग न करें, और फिर .buttonऊपर के रूप में स्टाइल के साथ इनका मिलान करें । इससे मतभेदों को कम करने में मदद मिलनी चाहिए, अगर उन्हें पूरी तरह से नहीं हटाया जाता है, और आपके (अविश्वसनीय - जैसा कि आप सही कहते हैं) ब्राउज़र प्रकार और संस्करण को सूँघने की विधि से बेहतर है।
— ओली बेनेट
@ ऑलीबेनेट ट्रू: आप एक बटन के रूप को पूरी तरह से फिर से परिभाषित कर सकते हैं। मैंने ऐसा करने की कोशिश नहीं की है, यह सुनिश्चित करने के लिए नहीं कि शैली के कितने पहलू आपको ओवरराइड करने हैं। एक दर्द की तरह लगता है, लेकिन कोशिश नहीं की, मैं यह नहीं कह सकता कि यह अन्य विकल्पों की तुलना में कितना दर्द है।
— जय
@CraigGjerdingen मुझे वास्तव में आपके द्वारा .link_button के लिए उपयोग की जाने वाली शैलियाँ पसंद हैं। CSS3 का उपयोग निश्चित रूप से इस उत्तर को अपडेट करता है। "नियमित" ब्राउज़र बटन की तरह कम शैलियों का उपयोग करना, लेकिन फिर भी एक बटन का खर्च है, जो बिना किसी (imo) के सूँघने वाले ब्राउज़र की समस्या को हल करता है<input type="submit">
— इवान डोनोवन
128

क्यों नहीं एक बटन तत्व के चारों ओर एक लंगर टैग लपेटो।

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

यह IE9 +, क्रोम, सफारी, फ़ायरफ़ॉक्स और शायद ओपेरा के लिए काम करेगा।

— guanome
स्रोत
8
@ डीन_विलसन कोशिश कर रहा है कि वह ६:५० :(
— रोबोटिक
@feeel क्योंकि मेरे लिए एक सुसंगत दिखने वाला बटन प्राप्त करना आसान था। यदि आप CSS का उपयोग करते हैं, तो इसमें देशी स्टाइल नहीं होगा। किसी और के पास पहले से ही वैसे भी जवाब था।
— गुनोम
1
मुझे यह समाधान पसंद है, क्योंकि आपको सीएसएस के साथ मूल ब्राउज़र की बटन शैली की नकल करने की कोशिश नहीं करनी है। हालाँकि, फ़ायरफ़ॉक्स में मुझे इसके साथ ही काम करना था <button type="button">। प्रकार विशेषता के बिना यह हमेशा एक पोस्टबैक करेगा और लिंक को अनदेखा करेगा।
— तोबियस
@Pyitoechito मुझे यकीन है कि यह क्रोम और सफारी वेबकिट पर है। ऐसा लगता है कि यह jsfiddle.net/9Gt7y
— guanome
31
नेस्टिंग <बटन> और <a> वैध HTML नहीं है और इसमें अपरिभाषित व्यवहार है। यहां विस्तृत जवाब देखें stackoverflow.com/questions/6393827/… यदि यह काम करता है, तो यह सिर्फ एक संयोग है।
— ओडिन
36

IMHO, एक बेहतर और अधिक सुरुचिपूर्ण समाधान है। यदि आपका लिंक यह है:

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

संबंधित बटन यह होना चाहिए: 

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

यह दृष्टिकोण सरल है क्योंकि यह सरल HTML तत्वों का उपयोग करता है, इसलिए यह बिना कुछ बदले सभी ब्राउज़रों में काम करेगा । इसके अलावा, यदि आपके पास अपने बटनों के लिए शैली है, तो यह समाधान आपके नए बटन पर समान शैलियों को मुफ्त में लागू करेगा।

— राउल लूना
स्रोत
5
ठीक है, मैंने आज इसका परीक्षण किया .. और यह बहुत अच्छा काम करता है यदि आप ASP.NET वेबफॉर्म का उपयोग नहीं कर रहे हैं। ASP.NET वेबफॉर्म पूरे पेज को एक फॉर्म टैग में लपेटता है और नेस्टेड फॉर्म बिल्कुल भी काम नहीं करते हैं - यह ASP.NET फॉर्म टैग के बाहर काम करता है, लेकिन यह उपयोग को बहुत ऊपर और नीचे के लिंक तक सीमित करता है।
— मैथ्मार्टिन
3
सरल और प्रभावी। आप प्रदर्शन को जोड़ना चाह सकते हैं: फार्म तत्व को इनलाइन शैली। अन्यथा इसे एक ब्लॉक की तरह माना जाता है जो बटन / एंकर / इनपुट से अलग होता है।
— निमरोडम
अच्छा प्रश्न। मुझे ऐसा नहीं लगता, या तो। लेकिन यहां दिखाए गए अन्य समाधान googlebot के साथ काम नहीं करेंगे, उदाहरण के लिए एक बटन टैग का उपयोग करने वाले।
— राउल लूना
मैंने इसे Django में आज़माया, लेकिन जैसे ही बटन दूसरे रूप में समाप्त होता है, यह एक लिंक के रूप में कार्य करने के बजाय डेटा को पोस्ट कर देता है।
— wobbily_col
1
आप जावास्क्रिप्ट में बटन को पुनर्निर्देशित भी कर सकते हैं। लेकिन अब यह लिंक नहीं है - "क्लिपबोर्ड पर लिंक एड्रेस कॉपी न करें", नए टैब आदि में खोलने के लिए मध्य क्लिक करें, माउस के साथ इसके ऊपर मँडराकर लिंक लक्ष्य का पूर्वावलोकन करें
— अलेक्जेंडर टेलर
27

CSS3 appearanceप्रॉपर्टी किसी भी तत्व (एंकर सहित) को ब्राउज़र की अंतर्निहित <button>शैलियों के साथ स्टाइल करने का एक सरल तरीका प्रदान करती है :

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>
स्निपेट का विस्तार करें

CSS ट्रिक्स में इस पर अधिक विवरण के साथ एक अच्छी रूपरेखा है। ध्यान रखें कि वर्तमान में Internet Explorer का कोई भी संस्करण caniuse.com के अनुसार इसका समर्थन नहीं करता है ।

— केविन लेरी
स्रोत
5
इसे CSS3 युक्ति से हटा दिया गया था। htmlvalidator.com/help.php?m=1&h=appearance
— user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

<a>यदि आप उन्हें ब्लॉक डिस्प्ले देते हैं तो आप इस तरह टैग के साथ खेल सकते हैं । आप प्रभाव की तरह एक छाया देने के लिए सीमा को समायोजित कर सकते हैं और उस बटन के लिए पृष्ठभूमि का रंग महसूस करते हैं :)

— Óलफरूर वेज
स्रोत
18

यदि आप गोल कोनों के साथ अच्छा बटन चाहते हैं, तो इस वर्ग का उपयोग करें:

.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>
स्निपेट का विस्तार करें

— rupsray
स्रोत
3
मैंने इसे और उच्चतम रैंक उत्तर को jsFiddle में जोड़ा। के साथ चारों ओर गंदगी के लिए स्वतंत्र महसूस jsfiddle.net/5z6ew1m0/6
— क्रेग Gjerdingen
आप इसमें एक जोड़ना चाह सकते हैं margin। अन्यथा, अच्छा काम यह स्टाइल।
— c00000fd
3

जैसा कि TStamper ने कहा, आप बस CSS क्लास को इस पर लागू कर सकते हैं और इसे इस तरह से डिजाइन कर सकते हैं। जैसा कि सीएसएस उन चीजों की संख्या में सुधार करता है जो आप लिंक के साथ कर सकते हैं, असाधारण बन गए हैं, और अब डिजाइन समूह हैं जो विषयों के लिए आश्चर्यजनक दिखने वाले सीएसएस बटन बनाने पर ध्यान केंद्रित करते हैं, और आगे।

उदाहरण के लिए, आप -webkit- संक्रमण संपत्ति और pseduo- वर्गों का उपयोग करके पृष्ठभूमि-रंग के साथ संक्रमण कर सकते हैं। इनमें से कुछ डिज़ाइन काफी पौष्टिक हो सकते हैं, लेकिन यह एक शानदार विकल्प प्रदान कर रहा है जो अतीत में हो सकता है, कहते हैं, फ्लैश।

उदाहरण के लिए (ये मेरी राय में मन उड़ाने वाले हैं), http://tympanus.net/Development/CreativeButtons/ (यह मूल पृष्ठ पर स्रोत कोड के साथ बटनों के लिए पूरी तरह से आउट-ऑफ-द-बॉक्स एनिमेशन की एक श्रृंखला है ) )। http://www.commentredirect.com/make-awesome-flat-buttons-css/ (इसी तर्ज पर, इन बटनों में अच्छे लेकिन न्यूनतर संक्रमण प्रभाव होते हैं, और वे नए "सपाट" डिजाइन शैली का उपयोग करते हैं।)

— graemeboy
स्रोत
3

आप इसे जावास्क्रिप्ट के साथ कर सकते हैं:

  1. के साथ वास्तविक बटन के सीएसएस शैलियों जाओ getComputedStyle(realButton)।
  2. अपने सभी लिंक पर शैलियों को लागू करें।

/* 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>
स्निपेट का विस्तार करें

— ilyaigpetrov
स्रोत
2

आप एक मानक बटन बना सकते हैं, फिर इसे लिंक के लिए पृष्ठभूमि छवि के रूप में उपयोग कर सकते हैं। फिर आप छवि को बदले बिना लिंक में पाठ सेट कर सकते हैं।

सबसे अच्छा समाधान यदि आप एक विशेष प्रदान नहीं करते हैं बटन दो पहले से ही TStamper और urlafur Waage द्वारा दिए गए हैं।

— CJK
स्रोत
2

बहुत सा जवाब:

जब से मैंने पहली बार एएसपी में काम करना शुरू किया है, तब से मैं इस पर और कुश्ती लड़ रहा हूं। यहाँ सबसे अच्छा मैं आया हूँ:

अवधारणा: मैं एक कस्टम नियंत्रण बनाता हूं जिसमें एक टैग होता है। फिर बटन में मैंने एक ऑनक्लिक ईवेंट डाल दिया, जो डॉक्यूमेंट.लोकेशन को जावास्क्रिप्ट के साथ वांछित मान पर सेट करता है।

मैंने कंट्रोल बटनलिंक को कॉल किया, ताकि लिंकबूटन के साथ भ्रमित होने पर मुझे आसानी से मिल सके।

aspx:

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

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

कोड के पीछे:

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

इस योजना के लाभ: यह एक नियंत्रण की तरह दिखता है। आप इसके लिए एक एकल टैग लिखते हैं, <ButtonLink id = "mybutton" navigwrl = "blahblah" />

परिणामी बटन एक "वास्तविक" HTML बटन है और इसलिए एक वास्तविक बटन की तरह दिखता है। आपको सीएसएस के साथ एक बटन के लुक को अनुकरण करने की कोशिश करने की ज़रूरत नहीं है और फिर विभिन्न ब्राउज़रों पर अलग-अलग लुक के साथ संघर्ष करना है।

जबकि क्षमताएं सीमित हैं, आप अधिक गुणों को जोड़कर इसे आसानी से बढ़ा सकते हैं। यह संभावना है कि अधिकांश गुणों को अंतर्निहित बटन पर "पास" करना होगा, जैसे मैंने पाठ, सक्षम और cssclass के लिए किया था।

अगर किसी को एक सरल, क्लीनर या अन्यथा बेहतर समाधान मिला है, तो मुझे यह सुनकर खुशी होगी। यह एक दर्द है, लेकिन यह काम करता है।

— नीलकंठ
स्रोत
2

यही मैंने उपयोग किया है। लिंक बटन है

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

सीएसएस

/* 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;
}
— एंड्रयू हॉवन
स्रोत
हालांकि यह एक बटन की तरह ज्यादा नहीं दिखता है। मैं नहीं जानता कि आपको किसने उतारा है। यहाँ आपके द्वारा प्रदान किए गए कोड के लिए JS fiddle है: jsfiddle.net/yajj2x0p
— मैथ्मार्टिन
2

एस्प का उपयोग करने के बारे में कैसे: लिंकबटन

आप ऐसा कर सकते हैं - मैंने TStamper की प्रविष्टि का उपयोग करके एक लिंक बटन को मानक बटन की तरह बनाया। जब मैंने हॉवर किया, तब भी अंडरलाइनिंग टेक्स्ट के नीचे दिखाई गई, इसके बावजूदtext-decoration: none सेटिंग के ।

मैं style="text-decoration: none"लिंकबटन के भीतर जोड़कर होवर-अंडरलाइनिंग को रोकने में सक्षम था :

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
— ईसाई
स्रोत
लिंकबटन कुछ ऐसा बनाता है जो लिंक जैसा दिखता है लेकिन बटन की तरह काम करता है। सवाल इसके विपरीत पूछता है: कुछ ऐसा जो बटन की तरह दिखता है लेकिन लिंक की तरह काम करता है।
— Jay
2

सीमा, रंग और पृष्ठभूमि रंग गुणों का उपयोग करके आप एक बटन लुकलाइक html लिंक बना सकते हैं!

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>
स्निपेट का विस्तार करें

उम्मीद है की यह मदद करेगा :]

— श्री रमण
स्रोत
2

इस वर्ग का उपयोग करें । यह आपके लिंक buttonको एक aटैग पर कक्षा का उपयोग करते समय बटन के समान दिखाई देगा ।

या

यहाँ एक डेमो डेमो 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;
}
— मुहम्मद आशिकुज़्ज़मान
स्रोत
1

मैं एक का उपयोग करें asp:Button:

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

इस तरह, बटन का संचालन पूरी तरह से क्लाइंट-साइड है और बटन लिंक की तरह ही कार्य करता है targetPage।

— मानुस हाथ
स्रोत
अच्छा काम दिखा asp:Buttonरहा है जो व्यवहार में दिखता है, इसलिए यह अन्य उपयोगकर्ताओं की मदद कर सकता है!
— उपयोगकर्ता जो
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>
स्निपेट का विस्तार करें

0

नीचे स्निपेट का उपयोग करें।

    .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

सरल बटन सीएसएस अब आप अपने संपादक के साथ खेल सकते हैं

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

लिंक टैग

<a href="#">Hover me<a>
— codeuix
स्रोत
-1

इसने मेरे लिए काम किया। यह एक बटन की तरह दिखता है और एक लिंक की तरह व्यवहार करता है। आप इसे उदाहरण के लिए बुकमार्क कर सकते हैं।

<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>
— लेडी एडमेंको
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.