कैसे एक बटन की तरह <a href=/torts> लिंक दिखना चाहिए?

100

मेरे पास यह बटन छवि है:
यहां छवि विवरण दर्ज करें

मैं सोच रहा था कि क्या <a href="">some words</a>उस बटन के रूप में दिखने के लिए एक सरल और शैली बनाना संभव होगा ?

यदि यह संभव है, तो मैं कैसे करूँ?

html css

— GeekedOut
स्रोत

5

css-tricks.com/examples/ButtonMaker

— डैनियल ए। व्हाइट

1

CSS का उपयोग करके मुझे लगता है;) google.com.ua/search?q=style+anchor+tag+like+button

— antyrat

5

उपयोगकर्ताओं को वेब इंटरफ़ेस की नज़र से जानना चाहिए कि इसका व्यवहार क्या है ... इसलिए बटन के रूप को लिंक के रूप में उपयोग नहीं किया जाना चाहिए, और लिंक के दृश्य स्वरूप को बटन के रूप में उपयोग नहीं किया जाना चाहिए।

— विरोधी डेस

2

आमतौर पर आपको एक बटन के लिए एक से अधिक छवि की आवश्यकता होती है: मानक, होवरेड, दबाया हुआ, सक्रिय। अन्यथा यह स्वाभाविक नहीं लगेगा।

— user123444555621

मेरा सुझाव है cursor: pointer;कि कर्सर को जोड़ने के लिए आप सीएसएस में भी हाथ जोड़ते हैं , जो एक संकेतक तर्जनी के साथ हाथ जोड़ता है, क्योंकि यह भी एक नियमित बटन के साथ होता है और उपयोगकर्ता के लिए एक उपयोगी सहायता है।

— आर। श्रेयर्स

106

CSS का उपयोग करना:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

<a class="button">Add Problem</a>

स्निपेट का विस्तार करें

http://jsfiddle.net/GCwQu/

— डेक्कन कुक
स्रोत

यह केवल मेरे लिए काम करता है अगर मैं इसे aसीधे टैग करने के लिए लागू करता हूं ( a {display: block ...}), जो स्वीकार्य नहीं है। क्या आपके पास कोई विचार है कि टैग के classअंदर विशेषता क्यों aकाम नहीं करेगी? :( मैं फ़ायरफ़ॉक्स 27 का उपयोग कर रहा हूँ। मैंने भी कोशिश की a.button {...}और यह भी काम नहीं करता है।

— just_a_girl

4

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप <a class="btn btn-info"> </a> कर सकते हैं और मौजूदा बूटस्ट्रैप शैलियों का उपयोग कर सकते हैं और एक नई शैली को परिभाषित करने से बच सकते हैं।

— स्टॉर्कबेट

अगर आपको अपने बटन में एक रेखांकन मिलता है, तो जोड़ेंtext-decoration:none

— रोहित चेम्बुरकर

99

बूटस्ट्रैप के डॉक्स की जाँच करें । एक वर्ग .btnमौजूद है और aटैग के साथ काम करता है , लेकिन आपको .btn-*कक्षा के साथ एक विशिष्ट वर्ग जोड़ने की आवश्यकता है .btn।

उदाहरण के लिए: <a class="btn btn-info"></a>

— गिल्डस रॉस
स्रोत

1

महान। मैं बूटस्ट्रैप का उपयोग कर रहा था और यह नहीं जानता था कि; पी

— फेलिप कारमिनाटी

13

बूटस्ट्रैप के हाल के संस्करणों में आपको btn वर्ग के साथ एक विशिष्ट btn- * वर्ग की आवश्यकता होती है। जैसे: <a class="btn btn-info"> </a>

— stcorbett

15

आप आसानी से एक बटन को इस तरह लिंक के साथ लपेट सकते हैं <a href="#"> <button>my button </button> </a>

— प्रतिपक्षी
स्रोत

18

एचटीएमएल 5 वैध

— डूड

1

उन्हें इस पर युक्ति को बदलना चाहिए; यह मेरे लिए सबसे अधिक समझ में आता है।

— लोनी बेस्ट

14

कुछ इस तरह एक बटन सदृश होगा:

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

एक उदाहरण के लिए http://jsfiddle.net/r7v5c/1/ देखें ।

— पानी का छींटा
स्रोत

1

सीमा-त्रिज्या जोड़ने: 5 पीएक्स; लुक को पूरा करेगा।

— २१:

10

इसे इस्तेमाल करे:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Button Tags</h2>
  <a href="#" class="btn btn-info" role="button">Link Button</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-info" value="Input Button">
  <input type="submit" class="btn btn-info" value="Submit Button">
</div>

स्निपेट का विस्तार करें

आप hrefवहां से एक टैग लाइन का उपयोग कर सकते हैं ।
```
<a href="URL" class="btn btn-info" role="button">Button Text</a>
```

— नींद बी
स्रोत

5

यदि आप सीएसएस के साथ एक विशिष्ट डिज़ाइन को हार्ड-कोडिंग से बचना चाहते हैं, बल्कि ब्राउज़र के डिफ़ॉल्ट बटन पर भरोसा करते हैं, तो आप निम्न टॉस का उपयोग कर सकते हैं।

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

ध्यान दें कि यह शायद IE पर काम नहीं करेगा।

— botmsh
स्रोत

ब्राउज़र समर्थन की वर्तमान स्थिति के लिए, caniuse.com/#feat=css-appearance देखें ; ध्यान दें कि ब्राउज़र appearance: buttonमूल बटन की तुलना में अलग तरीके से प्रस्तुत कर सकता है (कम से कम जब मैंने अभी Chrome 78 पर जाँच की हो)।

— SOLO

यह वही है जो मैं देख रहा था, लेकिन यह <a>क्रोम में विशेष रूप से काम नहीं करता है । इस पर परीक्षण किया <span>और यह ठीक काम किया।

— हाशबोर्न

4

कोई भी अन्य उत्तर उस कोड को नहीं दिखाता है जहां लिंक बटन होवर पर अपना स्वरूप बदलता है।

इसे मैंने ठीक करने के लिए किया है:

HTML:

<a href="http://www.google.com" class="link_button2">My button</a>

सीएसएस:

.link_button2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #1A4575;
  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: #3A68A1;
  color: #fee1cc;
  text-decoration: none;
  padding: 8px 12px;
  text-decoration: none;
  font-size: larger;
}

a.link_button2:hover {
  text-decoration: underline;
  background: #4479BA;
  border: solid 1px #20538D;

  /* optional different shadow on hover
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  */

}

JSFiddle: https://jsfiddle.net/adamovic/ovu3k0cj/

— म्लाडेन एडमोविक
स्रोत

2

टैग background-imageपर सीएसएस संपत्ति का उपयोग करें<a>
सेट display:blockऔर समायोजित widthऔर heightसीएसएस में

यह काम कर जाना चाहिए।

— dweeves
स्रोत

1

हां, आप यह कर सकते हैं।

यहाँ एक उदाहरण है:

a{
    background:IMAGE-URL;
    display:block;
    height:IMAGE-HEIGHT;
    width:IMAGE-WIDTH;
}

बेशक आप उपरोक्त उदाहरण को अपनी जरूरत के लिए संशोधित कर सकते हैं। महत्वपूर्ण बात यह है कि इसे एक ब्लॉक ( display:block) या इनलाइन ब्लॉक ( display:inline-block) के रूप में प्रदर्शित किया जाए ।

— r0skar
स्रोत

आपको डिस्प्ले रखना चाहिए: इनलाइन; और ऊंचाई और चौड़ाई का उपयोग करने के बजाय, आपको लंगर के आकार को समायोजित करने के लिए पैडिंग और लाइन की ऊँचाई का उपयोग करना चाहिए

— प्रतिपक्षी

@Antagonist: चूंकि ओपी पृष्ठभूमि के रूप में एक छवि चाहता है और वह शायद हमेशा उसी का उपयोग करेगा, इसलिए मैं नहीं देखता कि वह उस छवि की विशिष्ट ऊंचाई और चौड़ाई का उपयोग क्यों न करे। लेकिन मुझे लगता है कि ओपी सभी सुझाए गए समाधानों की कोशिश करेगा और जो सबसे अच्छा लगता है उसे चुनें।

— r0skar

मैं जो कह रहा हूं, उसी चीज़ को प्राप्त करने और मूल प्रदर्शन संपत्ति को इनलाइन बनाए रखने के लिए अन्य सीएसएस गुणों का उपयोग करने के लिए ...

— विरोधाभास

1

मूल HTML के लिए, आप बस HREF (A) के अंदर अपनी छवि URL पर सेट src के साथ एक img टैग जोड़ सकते हैं

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>

— msmucker0527
स्रोत

1

आप उन एंकर तत्वों के लिए एक वर्ग बना सकते हैं जिन्हें आप बटन के रूप में प्रदर्शित करना चाहते हैं।

उदाहरण के लिए:

एक छवि का उपयोग करना:

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

या शुद्ध सीएसएस दृष्टिकोण का उपयोग कर:

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

पाठ को हमेशा कुछ इस तरह से छुपाना याद रखें:

text-indent: -9999em;

शुद्ध CSS बटनों की एक उत्कृष्ट गैलरी यहाँ है और आप css3 बटन जनरेटर का उपयोग भी कर सकते हैं

शैलियों और विकल्पों में से बहुत सारे यहाँ हैं

सौभाग्य

— Rdpi
स्रोत

1

आपको स्थिरता के लिए दो विकल्प मिले हैं।

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

।

<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>

return false; बटन के डिफ़ॉल्ट व्यवहार को रोकने के लिए है।

— Ghasan
स्रोत

1

बस नियमित सीएसएस बटन डिज़ाइन लें, और उस सीएसएस को एक लिंक पर लागू करें (ठीक उसी तरह जैसे आप एक बटन पर करेंगे)।

उदाहरण:

<a href="#" class="stylish-button">Some words</a>

<style type="text/css">
.stylish-button {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    color:#333;
    background-color:#FA2;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-size:16px;
    font-weight:700;
    padding:4px 16px;
    text-shadow:#FE6 0 1px 0
}
</style>

— graemeboy
स्रोत

मैं पिछले परियोजनाओं पर किया है और IE व्यवहार करने के लिए मना कर दिया। मैंने इस कोड का परीक्षण किया है, लेकिन मैं एक चिंता का वर्णन करना चाहूंगा जिसे अधिक औचित्य की आवश्यकता है।

— मेम

0

सक्रिय और फ़ोकस जोड़ने के बाद समस्या होने वालों के लिए अपने बटन को एक वर्ग या आईडी नाम दें और इसे सीएसएस में जोड़ें

उदाहरण के लिए

//HTML कोड

<button id="aboutus">ABOUT US</button>

// सीएसएस कोड

#aboutus{background-color: white;border:none;outline-style: none;}

— सुभम चौधरी
स्रोत

-1

क्रोमियम 40 और फ़ायरफ़ॉक्स 36 के साथ परीक्षण किया गया

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

— फ्रांज फनकॉशर
स्रोत

1

यह मान्य HTML नहीं है।

— जेवियर

-1

इस कोड को आज़माएं:

<code>

    <a href="#" class="button" > HOME </a>

    <style type="text/css">

        .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}

        .button:hover { background-color: #0066FF; }

    </style>

</code>

इसे देखें (यह बताएंगे कि यह कैसे करना है) - https://youtu.be/euti4HAJJfk

— D.Madhushan
स्रोत

StackOverflow में आपका स्वागत है! कृपया अपनी पोस्ट में सभी प्रासंगिक कोड शामिल करें और किसी बाहरी वेबसाइट के लिंक को शामिल न करें। अतिरिक्त जानकारी के लिए लिंक महान हैं , लेकिन आपकी पोस्ट किसी अन्य संसाधन से अकेले खड़ी होनी चाहिए - लिंक "मृत" हो सकते हैं या बदल सकते हैं। साथी प्रोग्रामर आपके उत्तर से सीधे प्रश्न में विस्तृत समस्या को हल करने में सक्षम होना चाहिए।

— ज़ाचरी एस्पिरिटु

-3

उस के रूप में एक सरल:

<a href="#" class="btn btn-success" role="button">link</a>

बस "class =" btn btn-success "और भूमिका = बटन जोड़ें

— Lio
स्रोत

1

इस प्रश्न में बूटस्ट्रैप टैग नहीं है। class="btn btn-success"एक बूटस्ट्रैप क्लास है।

— एलिमेंट 11