html - সকল - সিএসএস




কিভাবে একটি এইচটিএমএল বাটন একটি লিঙ্ক মত কাজ করে? (20)

আমি একটি লিঙ্ক মত কাজ করে একটি HTML বাটন তৈরি করতে চাই। সুতরাং, যখন আপনি বাটনে ক্লিক করেন, এটি একটি পৃষ্ঠায় পুনঃনির্দেশিত হয়। আমি এটা যতটা সম্ভব অ্যাক্সেসযোগ্য হতে চাই।

আমি এটি পছন্দ করি যাতে ইউআরএলগুলিতে কোন অতিরিক্ত অক্ষর বা প্যারামিটার নেই।

আমি কিভাবে এই অর্জন করতে পারি?

এ পর্যন্ত পোস্ট করা উত্তরগুলির উপর ভিত্তি করে, আমি বর্তমানে এটি করছি:

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

কিন্তু সমস্যাটি Safari এবং Internet Explorer , এটি URL এর শেষে একটি প্রশ্ন চিহ্ন চরিত্র যোগ করে। আমার এমন একটি সমাধান খুঁজে বের করতে হবে যা URL এর শেষে কোনও অক্ষর যুক্ত করবে না।

এটি করার জন্য আরও দুটি সমাধান রয়েছে: জাভাস্ক্রিপ্ট ব্যবহার করে বা একটি বোতাম মত দেখতে একটি লিঙ্ক স্টাইলিং।

জাভাস্ক্রিপ্ট ব্যবহার করে

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

কিন্তু এই স্পষ্টভাবে জাভাস্ক্রিপ্ট প্রয়োজন, এবং যে কারণে এটি পাঠকদের পাঠযোগ্য কম অ্যাক্সেসযোগ্য। একটি লিঙ্ক বিন্দু অন্য পৃষ্ঠায় যেতে হয়। তাই একটি লিঙ্ক মত একটি বোতাম আইন করতে চেষ্টা ভুল সমাধান। আমার পরামর্শ আপনি একটি বোতাম মত দেখতে একটি লিঙ্ক এবং শৈলী ব্যবহার করা উচিত।

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

এইচটিএমএল

প্লেইন এইচটিএমএল উপায় এটি একটি <form> যেখানে আপনি action গুণাবলী মধ্যে পছন্দসই লক্ষ্য URL উল্লেখ।

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

যদি প্রয়োজন হয়, সিএসএস display: inline; সেট করুন display: inline; ফর্মটি পার্শ্ববর্তী পাঠের সাথে প্রবাহে রাখার জন্য। পরিবর্তে <input type="submit"> উপরের উদাহরণে, আপনি <button type="submit"> ব্যবহার করতে পারেন। শুধুমাত্র পার্থক্য হল যে <button> উপাদানটি শিশুদের অনুমতি দেয়।

আপনি ইচ্ছাকৃতভাবে <a> <button href="http://google.com"> <a> উপাদানটি ব্যবহার করতে সক্ষম হবেন বলে আশা করছেন, কিন্তু দুর্ভাগ্যবশত, এই বৈশিষ্ট্যটি HTML স্পেসিফিকেশন অনুসারে বিদ্যমান নেই।

সিএসএস

যদি সিএসএসটি অনুমোদিত হয় তবে কেবল <a> যা আপনি শৈলী দেখতে অন্যরকম ব্যবহার করে বোতামের মতো দেখতে পছন্দ করেন ( শুধুমাত্র ইন্টারনেট এক্সপ্লোরার সমর্থন বর্তমানে (জুলাই 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" />

@ নিকোলাস, আমার জন্য আপনার অনুসরণকৃত কাজটি type="button" না যার কারণে এটি জমা দেওয়ার ধরন হিসাবে আচরণ শুরু করেছিল। কারণ আমার কাছে ইতিমধ্যে একটি জমা টাইপ আছে। এটি আমার জন্য কাজ করেনি .... এবং এখন আপনি বাটনটিতে বাছাই করতে পারেন বা <a> প্রয়োজনীয় লেআউট পেতে <a> করতে পারেন:

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

আপনি কেবল উপাদান কাছাকাছি একটি ট্যাগ করা যাবে:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


আপনি যদি কোনও URL টি যে কোনও URL- র জন্য ব্যবহার করতে চান তবে একটি নোঙ্গরের জন্য একটি বাটন বর্গ তৈরি করুন।

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

আমি জানি অনেকগুলি উত্তর জমা দেওয়া হয়েছে, কিন্তু তাদের মধ্যে কেউই সমস্যাটির মুখোমুখি হতে পারেনি। এখানে একটি সমাধান আমার গ্রহণ করা হয়:

  1. <form method="get"> পদ্ধতিটি ব্যবহার করুন যা OP শুরু হচ্ছে। এটি সত্যিই ভাল কাজ করে, কিন্তু এটি কখনও কখনও একটি যোগ করে ? URL এ। ? প্রধান সমস্যা।
  2. জাভাস্ক্রিপ্ট সক্রিয় করা হয় যখন নিম্নলিখিত লিঙ্ক করতে jQuery / জাভাস্ক্রিপ্ট ব্যবহার যাতে ? ইউআরএল যোগ করা শেষ না। এটি জাভাস্ক্রিপ্ট সক্ষম না থাকা ব্যবহারকারীদের খুব ছোট ভগ্নাংশের জন্য <form> পদ্ধতিতে অবিচ্ছিন্নভাবে ফাঁকা হবে।
  3. জাভাস্ক্রিপ্ট কোড ইভেন্ট প্রতিনিধি ব্যবহার করে যাতে আপনি <form> বা <button> এমনকি উপস্থিত থাকা আগে একটি ইভেন্ট শ্রোতা সংযুক্ত করতে পারেন। আমি এই উদাহরণে jQuery ব্যবহার করছি, কারণ এটি দ্রুত এবং সহজ, তবে এটি 'ভ্যানিলা' জাভাস্ক্রিপ্টেও করা যেতে পারে।
  4. জাভাস্ক্রিপ্ট কোড ডিফল্ট কর্ম ঘটতে বাধা দেয় এবং তারপরে <form> action বৈশিষ্ট্যতে প্রদত্ত লিঙ্কটি অনুসরণ করে।

JSBin উদাহরণ (কোড স্নিপেট লিঙ্ক অনুসরণ করতে পারে না)

// 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="button"><a href="yourlink.com">Link link</a></button>

তারপরে CSS এবং লিঙ্কটি স্টাইল করতে সিএসএস ব্যবহার করুন, যাতে লিংকটি বোতামের মধ্যে সমগ্র স্থানটি নেয় (তাই ব্যবহারকারীর কোন মিস-ক্লিক নেই):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

আমি এখানে একটি ডেমো তৈরি করেছেন।


এটা বাস্তব ফর্ম খুব সহজ এবং কোন ফর্ম উপাদান ব্যবহার করে। আপনি <a> ট্যাগের ভিতরে একটি বোতাম সহ :) ব্যবহার করতে পারেন।

এটার মত:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

এবং এটি একই পৃষ্ঠায় href লোড করবে। একটি নতুন পাতা চান? শুধু target="_blank"


এটি করার একমাত্র উপায় (ব্যাসুস এর দুর্দান্ত ধারণা ধারণা ব্যতীত) একটি জাভাস্ক্রিপ্ট onclick ইভেন্টটি বোতামে যুক্ত করে যা অ্যাক্সেসযোগ্যতার জন্য ভাল নয়।

আপনি একটি বাটন মত একটি স্বাভাবিক লিঙ্ক স্টাইলিং বিবেচনা করেছেন? আপনি ওএস নির্দিষ্ট বোতামগুলি উপায়ে অর্জন করতে পারবেন না, তবে এটি এখনও সেরা উপায়।


কেন শুধু একটি রেফারেন্স ট্যাগের ভিতরে আপনার বাটন স্থাপন না

<a href="https://www.google.com/"><button>Next</button></a>

এটি আমার জন্য পুরোপুরি কাজ করে বলে মনে হচ্ছে এবং লিঙ্কটিতে কোনও% 20 ট্যাগ যুক্ত করে না, ঠিক কীভাবে আপনি এটি চান। আমি প্রদর্শন করতে গুগল একটি লিঙ্ক ব্যবহার করেছেন।

আপনি অবশ্যই একটি ফর্ম ট্যাগ এই মোড়ানো পারে কিন্তু এটি প্রয়োজনীয় নয়।

অন্য স্থানীয় ফাইল লিঙ্ক করার সময় এটি একই ফোল্ডারে রাখুন এবং ফাইলের নামটি রেফারেন্স হিসাবে যুক্ত করুন। অথবা একই ফোল্ডারে না থাকলে ফাইলটির অবস্থান নির্দিষ্ট করুন।

<a href="myOtherFile"><button>Next</button></a>

এটি URL এর শেষে কোনও অক্ষর যুক্ত করে না, তবে ফাইলটির নামের সাথে শেষ হওয়ার আগে এটির ফাইলগুলির URL টি প্রজেক্টের পথ রয়েছে। যেমন

যদি আমার প্রকল্প গঠন ছিল ...

.. একটি ফোল্ডার নির্দেশ করে - চারটি সময় একটি ফাইল নির্দেশ করে প্যারেন্ট ফোল্ডারে একটি সাব ডিরেক্টরি বা ফাইল নির্দেশ

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

আমি main.html খুলতে হলে URL হবে,

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

যাইহোক, যখন আমি secondary.html এ পরিবর্তন করতে main.html এর ভিতরে বোতামটি ক্লিক করেছি, URL টি হবে,

http://localhost:0000/public/html/secondary.html 

ইউআরএল শেষে কোন বিশেষ অক্ষর অন্তর্ভুক্ত। আশা করি এটা কাজে লাগবে. যাইহোক - (% 20 একটি ইউআরএল একটি স্থান নির্দেশ করে তার এনকোড এবং তাদের জায়গায় ঢোকানো।)

দ্রষ্টব্য: স্থানীয় হোস্ট: 0000 সম্ভবত 0000 হবে না আপনার কাছে সেখানে আপনার নিজস্ব পোর্ট নম্বর থাকবে।

উপরন্তু main_ URL বন্ধ শেষে _আইজিটি = xxxxxxxxxxxxxx, x আপনার নিজের সংযোগ দ্বারা নির্ধারিত হয় তাই সম্ভবত আমার সমান হবে না।


মনে হচ্ছে আমি সত্যিই কিছু মূল পয়েন্ট বলছি কিন্তু আমি কেবল যতটা সম্ভব ভাল ব্যাখ্যা করতে চাই। পড়ার জন্য আপনাকে ধন্যবাদ এবং আমি এই অন্তত কাউকে সাহায্য আশা করি। শুভ প্রোগ্রামিং।


নীচের মত কিছু করছেন downsides আছে?

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

যেখানে a.nostyle এমন একটি শ্রেণী যা আপনার লিঙ্ক স্টাইলিং (যেখানে আপনি মানক লিঙ্ক স্টাইল থেকে পরিত্রাণ পেতে পারেন) এবং span.button একটি এমন শ্রেণী যা আপনার "বাটন" (পটভূমি, সীমানা, গ্রেডিয়েন্ট, ইত্যাদি) এর জন্য স্টাইলিং রয়েছে। ।


যদি আপনি একটি অভ্যন্তরীণ ফর্ম ব্যবহার করেন, তবে বোতামের উপাদান সহ বৈশিষ্ট্যাবলী টাইপ = "রিসেট" যোগ করুন। এটা ফর্ম কর্ম রোধ করা হবে।

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

যদি এটি একটি বোতামের দৃশ্যমান চেহারা তবে আপনি একটি মৌলিক এইচটিএমএল অ্যাঙ্কর ট্যাগের জন্য সন্ধান করছেন তবে আপনি টুইটার বুটস্ট্র্যাপ ফ্রেমওয়ার্কটি ব্যবহার করতে পারেন নীচের যেকোনো সাধারণ 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) নমুনা চেহারা:


এইচটিএমএল 5 এবং চিত্র ব্যাকগ্রাউন্ড বরাবর স্টাইল বোতাম জন্য

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>


এছাড়াও আপনি একটি বাটন ব্যবহার করতে পারেন:

উদাহরণস্বরূপ, ASP.NET কোর সিনট্যাক্সে :

// 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>

যদি আপনি বাটন ডাউনলোড বোতাম হিসাবে কাজ করতে চান

<a href="${link}" download><input type="button" id="btnDownload" value="Download Image"></input></a>


<a></a>একটি উপর গুণাবলী ব্যবহার করে উত্তর দিয়েছেন মানুষ <button></button>সহায়ক ছিল।

কিন্তু সম্প্রতি, আমি একটি সমস্যার সম্মুখীন যখন আমি একটি ভিতরে একটি লিঙ্ক ব্যবহার <form></form>

বোতাম এখন একটি জমা বাটন (HTML5) হিসাবে / হিসাবে গণ্য করা হয়। আমি প্রায় একটি উপায় কাজ করার চেষ্টা করেছি, এবং এই পদ্ধতি খুঁজে পেয়েছেন।

নীচের মত একটি সিএসএস শৈলী বাটন তৈরি করুন:

.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 );

}

অথবা এখানে একটি নতুন তৈরি করুন: সিএসএস বাটন জেনারেটর

এবং তারপরে আপনার তৈরি হওয়া CSS ট্যাগের নামে একটি শ্রেণির ট্যাগের সাথে আপনার লিঙ্ক তৈরি করুন:

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

এখানে একটি বোকা

জেএস ফিডল


ট্যাগ data-href="index.html"ভিতরে হিসাবে এটি ব্যবহার করুন button


যদি আপনার প্রয়োজন হয় তবে এটি একটি বোতামের মত দেখতে হবে, যা গ্রেডিয়েন্ট চিত্রের উপরে জোর দিয়ে , আপনি এটি করতে পারেন:

<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