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

Question

मुझे सीएसएस का उपयोग करके एक लिंक जैसा दिखने वाला बटन बनाने की आवश्यकता है। परिवर्तन किए जाते हैं, लेकिन जब मैं उस पर क्लिक करता हूं, तो यह दिखाता है कि यह एक बटन के रूप में धकेल दिया गया है। किसी भी विचार को कैसे हटाया जाए, ताकि बटन क्लिक करने पर भी लिंक के रूप में काम करे?

Comments

लिंक पर onclick ईवेंट बटन पर सरल हैं

— knittl

@knittl, @cletus दरअसल, HTML में लिंक और बटन के बहुत अलग अर्थ हैं। आपको whatwg.org/specs/web-apps/current-work/multipage/… पढ़ना चाहिए । लिंक की तरह दिखने के लिए बटन को स्टाइल करना एक अच्छा विचार नहीं हो सकता है, लेकिन यह यूआई डिज़ाइन पर निर्भर करता है, जबकि लिंक का उपयोग करना HTML स्पेक्स के खिलाफ है।

— एंटोन स्ट्रोगनॉफ

कुछ कारण हैं कि एक लिंक की तरह एक बटन स्टाइल करना आवश्यक हो सकता है। (1) बटन में टाइप = "सबमिट" है (2) बटन में फैंसी स्टाइल यानी बैकग्राउंड इमेज वेरिएबल लेंथ

— टीजे है।

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

— शाकर

मैं एक लिंक के बजाय एक बटन का उपयोग कर रहा हूं क्योंकि एक लिंक के साथ जेएस तरीकों को ट्रिगर करना, मैं #तब उपयोग करने के लिए लिंक करने के लिए मजबूर हूं event.preventDefault()। यह बुरा है, जैसा कि लिंक कर रहा है javascript:void(0);।

— आर्कॉन

Answer 1

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

<button> your button that looks like a link</button>

Comments

फिडल पर मेरी बहुत मामूली भिन्नता - पाठ-सजावट को स्थानांतरित कर दिया: बटन पर कार्य करने के लिए नियम को रेखांकित करें: हॉवर। मेरी कांटेदार बेला में देखें ।

— ओडबेड

आप सभी बटन के रूप में लिंक, गुंजाइश स्टाइल किया जा करने के लिए की तरह कुछ के साथ शैली नहीं करना चाहते हैं button.link {...styles...}तो <button class="link">Your button</button>। यह भी उपयोग करने से बचता है !importantजो हमेशा एक अच्छा विचार है।

— आर्कॉन

याद रखना ध्यान रखना outline। कुछ ब्राउज़र इसे बटन जोड़ते हैं। आप सेट कर सकते हैं outline-color: transparent।

— सिलिकॉनएमइंड

कृपया आउटलाइन को न हटाएं क्योंकि इससे आपका बटन अप्राप्य हो जाएगा: outlinenone.com

— डोमिनिक

border-bottomउपयोग के बजाय text-decoration:underline।

— ᴍᴀᴛᴛ '

Answer 2

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

निम्नलिखित सीएसएस सुनिश्चित करता है कि एंकर और बटन में समान सीएसएस गुण हैं और सभी सामान्य ब्राउज़रों पर समान व्यवहार करते हैं:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

उपरोक्त उदाहरण केवल buttonपठनीयता में सुधार के लिए तत्वों को संशोधित करता है, लेकिन इसे आसानी से संशोधित किया जा सकता है input[type="button"], input[type="submit"]और input[type="reset"]तत्वों को भी। आप एक वर्ग का उपयोग भी कर सकते हैं, यदि आप केवल कुछ बटन को एंकर की तरह बनाना चाहते हैं।

लाइव डेमो के लिए यह JSField देखें ।

कृपया यह भी ध्यान दें कि यह डिफ़ॉल्ट एंकर-स्टाइलिंग बटन (जैसे ब्लू टेक्स्ट-कलर) पर लागू होता है। इसलिए यदि आप टेक्स्ट-कलर या किसी और एंकर और बटन को बदलना चाहते हैं, तो आपको ऊपर दिए गए CSS के बाद ऐसा करना चाहिए ।

---

इस उत्तर में मूल कोड (स्निपेट देखें) पूरी तरह से अलग और अधूरा था।

/* Obsolete code! Please use the code of the updated answer. */

input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
	/* Remove all decorations to look like normal text */
	background: none;
	border: none;
	display: inline;
	font: inherit;
	margin: 0;
	padding: 0;
	outline: none;
	outline-offset: 0;
	/* Additional styles to look like a link */
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}

Comments

outline-offset: 0;अगर किसी को भी इसकी रूपरेखा तय करनी है तो आपको इसकी आवश्यकता क्यों है ?

— मोहम्मद

मुझे box-shadow: noneबटन पर सभी स्टाइल को साफ करने के लिए जोड़ना था

— टोब्बी

एक और एक:text-transform: none;

— शॉन टो

Answer 3

अगर आपको ट्विटर बूटस्ट्रैप का उपयोग करने में कोई आपत्ति नहीं है तो मेरा सुझाव है कि आप बस लिंक क्लास का उपयोग करें ।

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

मुझे आशा है कि यह किसी की मदद करता है :) एक अच्छा दिन है!

Comments

इसने बहुत अच्छा काम किया लेकिन कुछ वास्तविक <a> लिंक के विपरीत कुछ पैडिंग छोड़ दी। बस पेडिंग की एक शैली जोड़ें: 0! महत्वपूर्ण और यह सुनहरा है। धन्यवाद!

— डेविड

यह jquery के सत्यापन के साथ एक फॉर्म सत्यापन को ट्रिगर करने के लिए लगता है

— पॉल बेकर

यह एक विश्वसनीय समाधान नहीं है। यह न केवल ऊर्ध्वाधर केंद्र को तोड़ता है, बल्कि यह पाठ शैली और फ़ॉन्ट आकार में परिवर्तन को निष्क्रिय करता है।

— रेडॉन रोसबोरो

Answer 4

सीएसएस pseudoclass का उपयोग करने का प्रयास करें :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

लिंक और ऑनक्लिक ईवेंट का उपयोग करने के लिए संपादित करें (आप इनलाइन जावास्क्रिप्ट इवेंटहैंडलर का उपयोग नहीं करना चाहिए, लेकिन सादगी के लिए मैं यहां उनका उपयोग करूंगा):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

इसके साथ। आप अपने फ़ंक्शन के लिंक के लक्ष्य तक भी पहुंच सकते हैं। return falseक्लिक करने पर लिंक का अनुसरण करने से केवल ब्राउज़र को रोकेंगे।

यदि जावास्क्रिप्ट को निष्क्रिय किया जाता है तो लिंक एक सामान्य लिंक के रूप में काम करेगा और जब आप js का उपयोग some/page.phpकरना चाहते हैं तो आप अपने लिंक को मृत कर देना चाहते हैंhref="#"

Comments

मैं इसका उपयोग करूंगा लेकिन यह सुनिश्चित करने के लिए बहुत महत्वपूर्ण नहीं हूं कि क्या लागू करना है ताकि बटन इंडेंट न हो।

हाँ। N के रूप में 0 देने के बाद भी इंडेंटेशन अभी भी बना हुआ है

Answer 5

आप पूरे ब्राउज़र में लिंक के रूप में बटन को स्टाइल नहीं कर सकते। मैंने इसे आज़माया है, लेकिन कुछ ब्राउज़र में हमेशा कुछ अजीब तरह के पैडिंग, मार्जिन या फ़ॉन्ट समस्याएं होती हैं। या तो बटन को बटन की तरह रहने दें, या किसी लिंक पर onClick और preventDefault का उपयोग करें।

Comments

जब ब्राउज़र देशी विजेट का उपयोग करता था तब यह सच था। क्या यह अभी भी किसी भी हाल ही के ब्राउज़रों से दूर है?

— अइज

यह 2017 है और मेरा फ़ायरफ़ॉक्स अभी भी देशी विजेट का उपयोग करता है।

— माइकल स्काइपर

Answer 6

जैसा कि नीचे उदाहरण में दिखाया गया है, आप साधारण सीएसएस का उपयोग करके इसे प्राप्त कर सकते हैं

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}

<button type="submit" class="link"><span>Button as Link</span></button>