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




button hyperlink (18)

एचटीएमएल

सादा HTML तरीका इसे एक <form> में रखना है जिसमें आप action विशेषता में वांछित लक्ष्य URL निर्दिष्ट करते हैं।

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

यदि आवश्यक हो, तो सेट सीएसएस display: inline; इसे आसपास के पाठ के साथ प्रवाह में रखने के लिए फार्म पर। उपरोक्त उदाहरण में <input type="submit"> बजाय, आप <button type="submit"> भी उपयोग कर सकते हैं। केवल अंतर यह है कि <button> तत्व बच्चों को अनुमति देता है।

आप सहजता से <a> <button href="http://google.com"> <a> तत्व के साथ समान रूप से उपयोग करने में सक्षम होने की उम्मीद करेंगे, लेकिन दुर्भाग्य से नहीं, यह विशेषता HTML विनिर्देश के अनुसार मौजूद नहीं है।

सीएसएस

यदि सीएसएस की अनुमति है, तो बस एक <a> जिसे आप अन्य लोगों के बीच एक बटन की तरह दिखने के लिए शैली appearance हैं, केवल appearance संपत्ति ( केवल इंटरनेट एक्सप्लोरर समर्थन वर्तमान में (जुलाई 2015) खराब है )।

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

या Bootstrap जैसे कई सीएसएस पुस्तकालयों में से एक चुनें।

<a href="http://google.com" class="btn btn-default">Go to Google</a>

जावास्क्रिप्ट

यदि जावास्क्रिप्ट की अनुमति है, तो window.location.href सेट करें।

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

मैं एक HTML बटन बनाना चाहता हूं जो एक लिंक की तरह कार्य करता है। इसलिए, जब आप बटन पर क्लिक करते हैं, तो यह किसी पृष्ठ पर रीडायरेक्ट करता है। मैं इसे यथासंभव सुलभ बनाना चाहता हूं।

मुझे यह भी पसंद आएगा इसलिए यूआरएल में कोई अतिरिक्त अक्षर या पैरामीटर नहीं हैं।

इसे कैसे प्राप्त किया जा सकता है?

अब तक पोस्ट किए गए उत्तरों के आधार पर, मैं वर्तमान में यह कर रहा हूं:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

लेकिन इसके साथ समस्या यह है कि Safari और Internet Explorer , यह यूआरएल के अंत में एक प्रश्न चिह्न चरित्र जोड़ता है। मुझे ऐसे समाधान को खोजने की ज़रूरत है जो यूआरएल के अंत में कोई भी अक्षर नहीं जोड़ती है।

ऐसा करने के लिए दो अन्य समाधान हैं: जावास्क्रिप्ट का उपयोग करना या बटन की तरह दिखने के लिए एक लिंक स्टाइल करना।

जावास्क्रिप्ट का उपयोग करना:

<button onclick="window.location.href='/page2'">Continue</button>

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

<a href="/link/to/page2">Continue</a>

@ निकोलस, मेरे लिए काम करने के बाद आपके पास type="button" नहीं था जिसके कारण यह सबमिट प्रकार के रूप में व्यवहार करना शुरू कर दिया .. क्योंकि मेरे पास पहले से ही एक सबमिट प्रकार है। यह मेरे लिए काम नहीं किया .... और अब आप या तो आवश्यक लेआउट प्राप्त करने के लिए बटन को बटन या <a> जोड़ सकते हैं:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

आप बटन type-property को "बटन" पर सेट भी कर सकते हैं (यह फ़ॉर्म को सबमिट नहीं करता है), और उसके बाद इसे एक लिंक के अंदर घोंसला (यह उपयोगकर्ता को रीडायरेक्ट करता है)।

इस तरह आप एक ही फॉर्म में एक और बटन प्राप्त कर सकते हैं जो कि आवश्यकतानुसार फॉर्म जमा करता है। मुझे यह भी लगता है कि फॉर्म विधि और क्रिया को एक लिंक होने के लिए ज्यादातर मामलों में यह बेहतर है (जब तक कि यह एक खोज-फॉर्म नहीं है ...)

उदाहरण:

<form method="POST" action="/SomePath">
    <input type="text" name="somefield"/>
    <a href="www.target.com"><button type="button">Go to Target!</button></a>
    <button type="submit">submit form</button>
</form>

इस तरह पहला बटन उपयोगकर्ता को रीडायरेक्ट करता है, जबकि दूसरा फॉर्म सबमिट करता है।

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


इस समस्या के तीन समाधान हैं (सभी पेशेवरों और विपक्ष के साथ)।

समाधान 1: एक रूप में बटन।

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

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

http://someserver/pages2?

इसे ठीक करने का एक तरीका है, लेकिन इसे सर्वर-साइड कॉन्फ़िगरेशन की आवश्यकता होगी। Apache Mod_rewrite का उपयोग करके एक उदाहरण पीछे के साथ सभी अनुरोधों को पुनर्निर्देशित करना होगा ? बिना उनके संबंधित यूआरएल के लिए ? । यहां .htaccess का उपयोग करके एक उदाहरण दिया गया है, लेकिन यहां एक पूर्ण धागा here :

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

समान कॉन्फ़िगरेशन वेबसर्वर और उपयोग किए गए ढेर के आधार पर भिन्न हो सकते हैं। तो इस दृष्टिकोण का सारांश:

पेशेवरों:

  1. यह एक असली बटन है, और अर्थात् यह समझ में आता है।
  2. चूंकि यह एक असली बटन है, यह वास्तविक बटन की तरह कार्य करेगा (जैसे ड्रैगगेबल व्यवहार और / या सक्रिय होने पर स्पेस बार दबाते समय एक क्लिक की नकल करें)।
  3. कोई जावास्क्रिप्ट नहीं, कोई जटिल शैली आवश्यक नहीं है।

विपक्ष:

  1. पीछे हटना कुछ ब्राउज़रों में बदसूरत लग रहा है। इसे जीईटी के बजाय POST का उपयोग करके एक हैक (कुछ मामलों में) द्वारा तय किया जा सकता है, लेकिन साफ-सुथरा तरीका सर्वर-साइड रीडायरेक्ट होना है। सर्वर साइड रीडायरेक्ट के साथ नकारात्मकता यह है कि यह 304 रीडायरेक्ट के कारण इन लिंक के लिए एक अतिरिक्त HTTP कॉल का कारण बन जाएगा।
  2. अतिरिक्त <form> तत्व जोड़ता है
  3. कई रूपों का उपयोग करते समय एलिमेंट पोजिशनिंग मुश्किल हो सकती है और उत्तरदायी डिज़ाइन से निपटने पर भी बदतर हो जाती है। तत्वों के क्रम के आधार पर इस समाधान के साथ कुछ लेआउट असंभव हो सकता है। यदि इस चुनौती से डिजाइन प्रभावित होता है तो यह उपयोगिता को प्रभावित कर सकता है।

समाधान 2: जावास्क्रिप्ट का उपयोग करना।

आप बटन का उपयोग करके लिंक के व्यवहार की नकल करने के लिए ऑनक्लिक और अन्य घटनाओं को ट्रिगर करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। नीचे दिया गया उदाहरण एचटीएमएल से सुधार और हटाया जा सकता है, लेकिन यह विचार को स्पष्ट करने के लिए बस है:

<button onclick="window.location.href='/page2'">Continue</button>

पेशेवरों:

  1. सरल (मूलभूत आवश्यकता के लिए) और एक अतिरिक्त रूप की आवश्यकता नहीं होने पर अर्थपूर्ण रखें।
  2. चूंकि यह एक असली बटन है, यह वास्तविक बटन की तरह कार्य करेगा (जैसे ड्रैगगेबल व्यवहार और / या सक्रिय होने पर स्पेस बार दबाते समय एक क्लिक की नकल करें)।

विपक्ष:

  1. जावास्क्रिप्ट की आवश्यकता है जिसका मतलब कम सुलभ है। यह आधार (कोर) तत्व जैसे लिंक के लिए आदर्श नहीं है।

समाधान 3: एंकर (लिंक) एक बटन की तरह स्टाइल।

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

पेशेवरों:

  1. सरल (मूलभूत आवश्यकता के लिए) और अच्छे क्रॉस-ब्राउज़र समर्थन।
  2. काम करने के लिए <form> आवश्यकता नहीं है।
  3. काम करने के लिए जावास्क्रिप्ट की आवश्यकता नहीं है।

विपक्ष:

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

निष्कर्ष

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

यदि जावास्क्रिप्ट आपकी पहुंच-योग्यता आवश्यकताओं में बाधा नहीं है, तो समाधान # 2 ( जावास्क्रिप्ट ) को # 1 और # 3 से अधिक पसंद किया जाएगा।

अगर किसी कारण से, अभिगम्यता महत्वपूर्ण है (जावास्क्रिप्ट एक विकल्प नहीं है) लेकिन आप ऐसी परिस्थिति में हैं जहां आपका डिज़ाइन और / या आपका सर्वर कॉन्फ़िगरेशन आपको विकल्प # 1 का उपयोग करने से रोक रहा है, तो समाधान # 3 ( एंकर एक बटन की तरह स्टाइल ) न्यूनतम उपयोगिता प्रभाव के साथ इस समस्या को हल करने का एक अच्छा विकल्प है।


उपयोग:

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

दुर्भाग्यवश, यह मार्कअप अब HTML5 में मान्य नहीं है और न ही मान्य होगा और न ही हमेशा अपेक्षित रूप से काम करेगा। एक और दृष्टिकोण का प्रयोग करें।


एचटीएमएल 5 के रूप में, बटन formaction विशेषता का समर्थन करते हैं। सबसे अच्छा, कोई जावास्क्रिप्ट या चालबाजी की आवश्यकता नहीं है।

<form>
  <button formaction="http://.com">Go to !</button>
</form>

चेतावनियां

  • <form> टैग से घिरा होना चाहिए।
  • <button> प्रकार "सबमिट" होना चाहिए (या अनिर्दिष्ट), मैं इसे "बटन" प्रकार के साथ काम नहीं कर सका। जो नीचे बिंदु लाता है।
  • एक फॉर्म में डिफ़ॉल्ट कार्रवाई ओवरराइड करता है। दूसरे शब्दों में, यदि आप इसे किसी अन्य रूप में करते हैं तो यह एक संघर्ष का कारण बन जाएगा।

संदर्भ: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction ब्राउज़र समर्थन: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


कुछ अन्य लोगों ने जो कुछ जोड़ा है, उसके साथ जाकर, आप एक साधारण सीएसएस क्लास का उपयोग करके जंगली जा सकते हैं जिसमें कोई PHP, कोई jQuery कोड नहीं है, बस सरल HTML और CSS।

एक सीएसएस वर्ग बनाएं और इसे अपने एंकर में जोड़ें। कोड नीचे है।

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -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);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

बस इतना ही। यह करना बहुत आसान है और आपको उतना ही रचनात्मक बनने देता है जितना आप चाहें। आप रंग, आकार, आकार (त्रिज्या) इत्यादि को नियंत्रित करते हैं। अधिक जानकारी के लिए, मुझे जिस साइट पर यह मिला , उसे देखें।


क्या निम्न की तरह कुछ करने के लिए कोई डाउनसाइड्स हैं?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

जहां a.nostyle एक वर्ग है जिसमें आपका लिंक स्टाइल है (जहां आप मानक लिंक स्टाइल से छुटकारा पा सकते हैं) और span.button एक वर्ग है जिसमें आपके "बटन" (पृष्ठभूमि, सीमा, ढाल इत्यादि) के लिए स्टाइल है। ।


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

  1. <form method="get"> विधि का उपयोग करें जिसे OP प्रारंभ हो रहा है। यह वास्तव में अच्छी तरह से काम करता है, लेकिन यह कभी-कभी एक संलग्न करता है ? यूआरएल के लिए। द ? मुख्य समस्या है।
  2. जावास्क्रिप्ट सक्षम होने पर निम्न लिंक करने के लिए jQuery / जावास्क्रिप्ट का उपयोग करें ताकि वह ? यूआरएल में संलग्न नहीं है। यह उन उपयोगकर्ताओं के बहुत छोटे अंश के लिए <form> विधि पर निर्बाध रूप से फ़ॉलबैक करेगा, जिनके पास जावास्क्रिप्ट सक्षम नहीं है।
  3. जावास्क्रिप्ट कोड ईवेंट प्रतिनिधिमंडल का उपयोग करता है ताकि आप <form> या <button> यहां मौजूद होने से पहले एक ईवेंट श्रोता संलग्न कर सकें। मैं इस उदाहरण में jQuery का उपयोग कर रहा हूं, क्योंकि यह तेज़ और आसान है, लेकिन यह 'वेनिला' जावास्क्रिप्ट में भी किया जा सकता है।
  4. जावास्क्रिप्ट कोड डिफ़ॉल्ट क्रिया को होने से रोकता है और उसके बाद <form> action विशेषता में दिए गए लिंक का पालन करता है।

जेएसबीन उदाहरण (कोड स्निपेट लिंक का पालन नहीं कर सकता)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});
<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>


यदि आप अंदरूनी फॉर्म का उपयोग कर रहे हैं, तो बटन तत्व के साथ विशेषता प्रकार = "रीसेट" जोड़ें। यह फॉर्म एक्शन को रोक देगा।

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

यदि आप किसी फॉर्म या इनपुट का उपयोग करने से बचना चाहते हैं और आप एक बटन-दिखने वाले लिंक की तलाश में हैं, तो आप एक डिवी रैपर, एंकर और h1 टैग के साथ अच्छे दिखने वाले बटन लिंक बना सकते हैं। आप संभावित रूप से यह चाहते हैं ताकि आप अपने पृष्ठ के चारों ओर लिंक-बटन आसानी से रख सकें। यह विशेष रूप से क्षैतिज केंद्रित बटनों के लिए उपयोगी है और उनमें से लंबवत केंद्रित टेक्स्ट है। ऐसे:

आपके बटन में तीन नेस्टेड टुकड़े शामिल होंगे: एक डिवी रैपर, एक एंकर, और एच 1, जैसे:

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

फिर सीएसएस में, आपकी स्टाइल इस तरह दिखनी चाहिए:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

Here's यह देखने के लिए एक jsFiddle है और इसके साथ खेलें।

इस सेटअप के लाभ: 1. डिवी रैपर डिस्प्ले बनाना: ब्लॉक केंद्र को आसान बनाता है (मार्जिन: 0 ऑटो का उपयोग करके) और स्थिति (जबकि <a> इनलाइन और स्थिति के लिए कठिन है और केंद्र में संभव नहीं है)।

  1. आप बस <a> डिस्प्ले: ब्लॉक बना सकते हैं, इसे चारों ओर ले जा सकते हैं, और इसे एक बटन के रूप में स्टाइल कर सकते हैं, लेकिन फिर इसके अंदर टेक्स्ट को लंबवत रूप से संरेखित करना कठिन हो जाता है।

  2. यह आपको <a> डिस्प्ले: इनलाइन-टेबल और <h1> डिस्प्ले: टेबल-सेल बनाने की अनुमति देता है, जो आपको लंबवत-संरेखण का उपयोग करने की अनुमति देता है: <h1> पर मध्य और इसे लंबवत केंद्र (जो हमेशा अच्छा होता है एक बटन)। हां, आप पैडिंग का उपयोग कर सकते हैं, लेकिन यदि आप चाहते हैं कि आपका बटन गतिशील रूप से आकार बदल जाए, तो यह उतना साफ नहीं होगा।

  3. कभी-कभी जब आप एक div के भीतर <a> को एम्बेड करते हैं, तो केवल पाठ क्लिक करने योग्य होता है, यह सेटअप पूरे बटन को क्लिक करने योग्य बनाता है।

  4. यदि आप किसी अन्य पृष्ठ पर जाने की कोशिश कर रहे हैं तो आपको फ़ॉर्म से निपटने की ज़रूरत नहीं है। फॉर्म जानकारी इनपुट करने के लिए हैं, और उन्हें इसके लिए आरक्षित किया जाना चाहिए।

  5. आपको एक दूसरे से बटन स्टाइल और टेक्स्ट स्टाइल को स्पष्ट रूप से अलग करने की अनुमति देता है (खिंचाव लाभ? निश्चित रूप से, लेकिन सीएसएस खराब दिख सकता है इसलिए इसे विघटित करना अच्छा है)।

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


यदि यह एक बटन की दृश्य उपस्थिति है जिसे आप मूल HTML एंकर टैग में ढूंढ रहे हैं तो आप एक बटन के रूप में दिखाई देने के लिए निम्न सामान्य HTML प्रकार लिंक / बटनों में से किसी एक को प्रारूपित करने के लिए ट्विटर बूटस्ट्रैप ढांचे का उपयोग कर सकते हैं। फ्रेमवर्क के संस्करण 2, 3 या 4 के बीच दृश्य अंतरों को ध्यान दें:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

बूटस्ट्रैप (v4) नमूना उपस्थिति:

बूटस्ट्रैप (v3) नमूना उपस्थिति:

बूटस्ट्रैप (v2) नमूना उपस्थिति:


बलुस के जवाब के संबंध में,

<form action="http://google.com">
    <input type="submit" value="Go to Google">
</form>

मुझे बटन में चर जोड़ने की ज़रूरत थी और यह सुनिश्चित नहीं था कि कैसे। मैं छिपा इनपुट प्रकार का उपयोग कर समाप्त हो गया। मैंने सोचा कि यह उन लोगों के लिए सहायक हो सकता है जिन्होंने इस पृष्ठ को अपने जैसा पाया।


<button></button> पर <a></a> विशेषताओं का उपयोग करने वाले लोगों ने उत्तर दिया है।

लेकिन फिर हाल ही में, जब मैंने <form></form> अंदर एक लिंक का उपयोग किया तो मुझे एक समस्या आई।

बटन अब सबमिट बटन (एचटीएमएल 5) के रूप में माना जाता है। मैंने चारों ओर एक तरह से काम करने की कोशिश की है, और इस विधि को मिला है।

नीचे एक जैसा सीएसएस स्टाइल बटन बनाएं:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

या यहां एक नया निर्माण करें: सीएसएस बटन जेनरेटर

और उसके बाद आपके द्वारा बनाए गए सीएसएस शैली के नाम पर एक वर्ग टैग के साथ अपना लिंक बनाएं:

<a href='link.php' class='btn-style'>Link</a>

यहाँ एक पहेली है:

जेएस फिडल


Also you can use a button:

For example, in ASP.NET Core syntax :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

If what you need is that it will look like a button, with emphasis on the gradient image , you can do this:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

    <input type = "submit" name = "submit" onClick= "window.location= 'http://example.com'">

मैंने इसे एक ऐसी वेबसाइट के लिए उपयोग किया जो मैं वर्तमान में काम कर रहा हूं और यह बहुत अच्छा काम करता है! अगर आप कुछ ठंडा स्टाइल भी चाहते हैं तो मैं सीएसएस को यहां नीचे रखूंगा।

input[type = "submit"] {
    background-color:white;
    width:200px;
    border: 3px solid #c9c9c9;
    font-size:24pt;
    margin:5px;
    color:#969696;
}
input[type = "submit"]:hover {
    color: white;
    background-color:#969696;
    transition: color 0.2s 0.05s ease;
    transition: background-color 0.2s 0.05s ease;
    cursor: pointer;
}

here JSFiddle काम कर रहे here


<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>






htmlbutton