কোনও লিঙ্কের মতো কাজ করে এমন একটি HTML বোতাম কীভাবে তৈরি করবেন?

Question

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

আমি এটিও চাই তাই URL- এ কোনও অতিরিক্ত অক্ষর বা পরামিতি নেই।

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

---

এখনও অবধি পোস্ট করা উত্তরগুলির ভিত্তিতে আমি বর্তমানে এটি করছি:

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

তবে এটির সাথে সমস্যাটি হ'ল সাফারি এবং ইন্টারনেট এক্সপ্লোরারে এটি URL এর শেষে একটি প্রশ্ন চিহ্ন চরিত্র যুক্ত করে। আমার এমন একটি সমাধান খুঁজে বার করতে হবে যা URL এর শেষে কোনও অক্ষর যুক্ত করবে না।

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

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

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

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

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

Comments

পোষ্টে GET পরিবর্তন করুন। কেউ মনে করেন না যে ওপি-র প্রথম সমস্যাটির সমাধান করা হয়েছে, যা ?ইউআরএল-এ ছিল। এটি ফর্মটি হওয়ার কারণে ঘটেছিল type="GET", এটিতে পরিবর্তন করুন type="POST"এবং ?URL এর শেষে অদৃশ্য হয়ে যায়। এই পেতে URL- এ সব ভেরিয়েবল পাঠায়, অত: পর কারণ ?।

— redfox05

@ redfox05 এটি এমন একটি প্রসঙ্গে কাজ করে যেখানে আপনি নিজের পৃষ্ঠাগুলির জন্য কোন পদ্ধতি গ্রহণ করবেন সে সম্পর্কে আপনি কঠোর নন। এমন একটি প্রসঙ্গে যেখানে আপনি যে পৃষ্ঠাগুলিতে পোস্ট প্রত্যাশা করছেন GETতা প্রত্যাখ্যান করে ব্যর্থ হবে will আমি এখনও মনে করি যে একটি লিঙ্ক ব্যবহার করা সতর্কতার সাথে বোঝায় যে এটি যখন "স্পেসবার" তে প্রতিক্রিয়া জানাবে না তখন সক্রিয় বোতামের মতো হয়। এছাড়াও কিছু শৈলী এবং আচরণ পৃথক হবে (যেমন ড্রাগচযোগ্য)। আপনি যদি সত্য "বোতাম-লিংক" অভিজ্ঞতা চান, ?এটির অপসারণের জন্য ইউআরএল ফিনিশিংয়ের জন্য সার্ভার সাইডের পুনঃনির্দেশগুলি থাকাও একটি বিকল্প হতে পারে।

— নিকোলাস বোভ্রেটে

আপনি সিএসএস দিয়ে একটি বোতাম তৈরি করতে চাইলে cssbuttongenerator.com কার্যকর হতে পারে।

— তুষার

আমি মনে করি যে কোনও লিঙ্কটি বোতামের মতো দেখতে তৈরি করা ভাল

— ইয়াসার

কেবলমাত্র একটি নোট, আমার জন্য "লিঙ্কের মতো বোতামটি কাজ করে" এর অর্থ, আমি ডান ক্লিক করতে পারি এবং সিদ্ধান্ত নিতে পারি যে নতুন ট্যাব / উইন্ডোতে খুলতে হবে, যা জেএস সমাধানের সাথে কাজ করছে না ...

— বেটলিস্টা

Answer 1

এইচটিএমএল

সরল এইচটিএমএল উপায় হ'ল এটিতে রাখা <form>যাতে আপনি actionবৈশিষ্ট্যে পছন্দসই টার্গেট ইউআরএল নির্দিষ্ট করেন ।

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

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

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

সিএসএস

সিএসএসের অনুমতি থাকলে, <a>অন্যদের মধ্যে appearanceসম্পত্তি ব্যবহার করে বোতামের মতো দেখতে আপনার স্টাইলটি কেবল এমনটি ব্যবহার করুন ( এটি কেবলমাত্র ইন্টারনেট এক্সপ্লোরারে সমর্থিত নয় )।

<a href="https://google.com" class="button">Go to Google</a>

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

    text-decoration: none;
    color: initial;
}

বা বুটস্ট্র্যাপের মতো অনেকগুলি সিএসএস লাইব্রেরির মধ্যে একটি বেছে নিন ।

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

জাভাস্ক্রিপ্ট

জাভাস্ক্রিপ্ট অনুমোদিত হলে, সেট করুন window.location.href।

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

<input type="button">উপরের উদাহরণের পরিবর্তে , আপনি এটিও ব্যবহার করতে পারেন <button>। পার্থক্য হ'ল <button>উপাদানটি বাচ্চাদের অনুমতি দেয়।

Comments

সহজ এবং সুন্দর। একটি সূক্ষ্ম সমাধান। display: inlineপ্রবাহে বোতামটি রাখতে ফর্মটিতে যুক্ত করুন ।

— পেক্কা

সাফারিতে এটি ইউআরএল শেষে একটি প্রশ্ন চিহ্ন যুক্ত করে ... এমন কিছু করার কোনও উপায় আছে যা ইউআরএলটিতে কিছু যুক্ত করে না?

— অ্যান্ড্রু

@ বালুসসি চমৎকার সমাধান, তবে যদি এটি অন্য কোনও ফর্মের (প্যারেন্ট ফর্ম) ভিতরে থাকে তবে এই বোতামটি টিপলে পিতামাতার ফর্ম ক্রিয়া বৈশিষ্ট্যে সম্বোধন করতে পুনঃনির্দেশ করা হয়।

— ভ্লাদিমির

এটি কি কেবল আমি বা <বাটন> ট্যাগটি কোনও স্পষ্ট href বৈশিষ্ট্য অনুপস্থিত?

দেখতে সহজ এবং সুন্দর লাগছে তবে সঠিকভাবে বিবেচনা না করা থাকলে এর পার্শ্ব প্রতিক্রিয়া হতে পারে। অর্থাত পৃষ্ঠা থেকে 2nd ফর্ম, নেস্টেড ফর্ম ইত্যাদি তৈরি

— Tejasvi হেগড়ে

Answer 2

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

নোট করুন যে type="button"বৈশিষ্ট্যটি গুরুত্বপূর্ণ, কারণ এটির অনুপস্থিত মান ডিফল্ট হ'ল জমা দিন বোতামের রাজ্য ।

Comments

@ পিনচোন কাজ করা উচিত। উইন্ডো নিহিত আইই

— আদম

দেখে মনে হচ্ছে আপনি টাইপ = "বোতাম" নির্দিষ্ট না করলে এটি সর্বদা কাজ করবে না। দেখে মনে হচ্ছে বোতামটি "জমা দিতে" ডিফল্ট হয়ে যাবে

— কেনেচেক

আপনি যদি নতুন উইন্ডো / ট্যাবে লিংকটি খুলতে চান তবে ব্যবহার করুন: onclick = "window.open (' example.com', '_ ফাঁকা' );"

— বেনোস

@ কনিটেক সঠিক, চশমা অনুসারে : " অনুপস্থিত মান ডিফল্ট হ'ল জমা দিন বোতামের অবস্থা" "

— নিলস কেওরেন্টজেস

তবে ব্যবহারকারী নতুন ট্যাবে রাইট ক্লিক করতে পারবেন না,

— এটির জন্য

Answer 3

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

Comments

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

— স্কটকেল্লাম

Answer 4

ব্যবহার করুন:

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

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

Comments

@BalusC: আমরাও করে এই পৃষ্ঠা

— রবার্ট হার্ভে

@ রব: এটি আমার সমস্যা নয় :) এটি মেটাতে ফেলে দিন এবং দেখুন। তবে targetবৈশিষ্ট্যটি প্রান্তে ইমো।

— বালাসসি

Answer 5

এইচটিএমএল 5 হিসাবে, বোতামগুলি formactionবৈশিষ্ট্যটিকে সমর্থন করে । সর্বোপরি, কোনও জাভাস্ক্রিপ্ট বা কৌশল নয়।

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

আদেশ সহকারে

• ঘিরে থাকতে হবে <form>ট্যাগ ।
• <button>প্রকারটি অবশ্যই "জমা" (বা অনির্ধারিত) হওয়া উচিত, আমি এটিকে "বোতাম" টাইপ দিয়ে কাজ করতে পারি না। যা নীচে পয়েন্ট আনে।
• কোনও ফর্মের মধ্যে ডিফল্ট ক্রিয়াকে ওভাররাইড করে। অন্য কথায়, আপনি যদি অন্য ফর্মের ভিতরে এটি করেন তবে এটি বিরোধের কারণ হতে পারে।

তথ্যসূত্র: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formations ব্রাউজার সমর্থন: https://developer.mozilla.org/en-US/docs/Web/ এইচটিএমএল / উপাদান / বোতাম # Browser_compatibility

Comments

কেবলমাত্র তথ্য সম্পূর্ণ করতে: সংস্করণ 10 এবং formaction

— তারপরের

নিখুঁতভাবে কৌতূহলী আপনি এবং আমি যে উদাহরণগুলি সরবরাহ করেছি তাতে কি এই দুটি রূপের আচরণের মধ্যে একটি প্রশংসনীয় পার্থক্য থাকার কথা? এই নির্দিষ্ট ক্ষেত্রে <button formaction>=== <form action>?

— সিউডোস্যাভ্যান্ট

@ সিউডোস্যাভ্যান্ট - পার্থক্যটি হ'ল আপনার উত্তর কাজ করার জন্য জাভাস্ক্রিপ্টের উপর নির্ভর করে। এই সমাধানে, কোনও জাভাস্ক্রিপ্টের দরকার নেই, এটি সরাসরি এইচটিএমএল।

— শাশ্বত ঘন্টা

@ চিরদিনের জন্য দুঃখিত, আমি আরও পরিষ্কার হওয়া উচিত ছিল। স্পষ্টতই জেএস খনিটিকে আলাদা করে তোলে তবে এটি কেবল একটি প্রগতিশীল বৃদ্ধি। ফর্মটি এখনও জেএস ছাড়াই সেই লিঙ্কটিতে যায়। <form>আমাদের প্রতিটি উদাহরণে কেবল এইচটিএমএল এর উদ্দেশ্যমূলক আচরণ সম্পর্কে আমি আগ্রহী ছিলাম । একটি খালি জিইটি জমা দেওয়ার জন্য কি formactionএটি যুক্ত করার buttonকথা রয়েছে ?? এই জেএসবিনে দেখে মনে হচ্ছে এইচটিএমএল উভয়ের জন্য ঠিক একই রকম আচরণ করে।

— সিউডোস্যাভ্যান্ট

এটি কেবলমাত্র ফর্ম ট্যাগগুলি মোড়ানো অবস্থায় কাজ করে তা লক্ষ করা দরকারী। খুঁজে

— পেল

Answer 6

এটি সত্যই খুব সাধারণ এবং কোনও ফর্ম উপাদান ব্যবহার না করেই। আপনি কেবল << ট্যাগটি ভিতরে বোতামের সাহায্যে ব্যবহার করতে পারেন :)।

এটার মত:

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

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

সম্পাদনা

কয়েক বছর পরে, আমার সমাধানটি এখনও কাজ করার সময়, মনে রাখবেন আপনি যা চান তা দেখতে এটির জন্য আপনি প্রচুর সিএসএস ব্যবহার করতে পারেন। এটি ছিল একটি দ্রুত উপায়।

Comments

এটি কাজ করার সময়, এটি একটি সমাধান হিসাবে বিবেচনা করা উচিত নয় তবে কাজের ভিত্তিতে বিবেচনা করা উচিত কারণ আপনি যদি এই কোডটি ডাব্লু 3 সি বৈধকারীর মাধ্যমে পাস করেন তবে আপনি ত্রুটি পাবেন।

— হাইদার বি।

হ্যাঁ, হায়দার বি আপনি ঠিক বলেছেন, তবে আপনার একটিটিও মনে রাখা উচিত যে মানকগুলি কেবল কাঁচা গাইড। প্রোগ্রামার হিসাবে আপনার সর্বদা বাক্সের বাইরে চিন্তা করা উচিত এবং বইতে নেই এমন জিনিসগুলি চেষ্টা করা উচিত;)।

— লুসিয়ান মিনা

অ্যাঙ্কারে অন্য অ্যাঙ্কর বা ফর্ম-অ্যাকশন উপাদানগুলিকে কখনও মোড়ানো নয়।

— রোকো সি বুলজান

আহা, আর কেন?

— লুসিয়ান মিনা

আপনার ব্যবহার করা উচিত <button type="button">...যাতে এটি জমা হিসাবে ডিফল্টরূপে কাজ না করে

— স্টিফেন আর

Answer 7

যদি আপনি কোনও অভ্যন্তরীণ ফর্ম ব্যবহার করছেন তবে বোতামের উপাদানটির সাথে অ্যাট্রিবিউট টাইপ = "রিসেট" যুক্ত করুন । এটি ফর্ম ক্রিয়া প্রতিরোধ করবে।

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

Comments

আপনি যদি চান এটি কেবল আপনার ফর্মটি পুনরায় সেট করতে। ব্যবহার করুনtype="button"

— স্টিফেন আর

Answer 8

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

Comments

@Robusto যে খালি জায়গা আছে ব্যবহার করা হয় সম্পর্কে একটি snarky মন্তব্য ছিল :) এই না আইএমও একটি ভাল সমাধান, যেমন জাভাস্ক্রিপ্ট ছাড়া কাজ করবে না।

— পেক্কা

@ পেক্কা: হ্যাঁ, এবং এটি এমনকি সুগঠিত এক্সএইচটিএমএলও নয়

— সান প্যাট্রিক ফ্লয়েড

যদি ফর্মটি ব্যবহার করে থাকেন তবে কেবল একটি জমা দিন, যদি অন্লিক ব্যবহার করে ফর্মটি নিয়ে বিরক্ত হন। -1

— নিমচিম্পস্কি

এটি এইচটিএমএল সুগঠিত নয়। ট্যাগটিতে inputশেষের ট্যাগ নেই।

— পিটার মর্টেনসেন

মতে @PeterMortensen এইচটিএমএল বৈশিষ্ট , inputউপাদান একটি অকার্যকর উপাদান। এটিতে অবশ্যই একটি শুরুর ট্যাগ থাকতে হবে তবে অবশ্যই একটি শেষ ট্যাগ নেই।

— ঘোপপে

Answer 9

এই সমস্যার তিনটি সমাধান রয়েছে বলে মনে হয় (সমস্ত ভাল এবং কুফলের সাথে)।

সমাধান 1: একটি ফর্ম বোতাম।

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

তবে এতে সমস্যাটি হ'ল ক্রোম, সাফারি এবং ইন্টারনেট এক্সপ্লোরারের মতো জনপ্রিয় ব্রাউজারগুলির কিছু সংস্করণে এটি ইউআরএলটির শেষে একটি প্রশ্ন চিহ্ন চরিত্র যুক্ত করে। সুতরাং অন্য URL টির জন্য কোডটির জন্য আপনার URL টি শেষ হবে:

http://someserver/pages2?

এটি ঠিক করার একটি উপায় আছে তবে এটির জন্য সার্ভার-সাইড কনফিগারেশন প্রয়োজন। অ্যাপাচি মোড_উরাইট ব্যবহার করে একটি উদাহরণ হ'ল? এটি ছাড়াই তাদের অনুরূপ URL এ একটি অনুসরণ সহ সমস্ত অনুরোধগুলি পুনর্নির্দেশ করা ?। .Htaccess ব্যবহার করে এখানে একটি উদাহরণ দেওয়া হয়েছে তবে এখানে একটি সম্পূর্ণ থ্রেড রয়েছে :

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

ওয়েবসভার এবং ব্যবহৃত স্ট্যাকের উপর নির্ভর করে অনুরূপ কনফিগারেশনগুলি পৃথক হতে পারে। সুতরাং এই পদ্ধতির সংক্ষিপ্তসার:

পেশাদাররা:

1. এটি একটি আসল বোতাম, এবং শব্দার্থভাবে এটি উপলব্ধি করে।
2. যেহেতু এটি একটি আসল বোতাম, তাই এটি বাস্তব বোতামের মতোও কাজ করবে (যেমন: ড্রাগাগুলি আচরণ এবং / অথবা সক্রিয় অবস্থায় স্পেস বারটি টিপানোর সময় একটি ক্লিক নকল করুন)।
3. কোনও জাভাস্ক্রিপ্ট নেই, জটিল স্টাইলের প্রয়োজন নেই।

কনস:

1. শেষের ?কিছু ব্রাউজারে দেখতে কুৎসিত দেখাচ্ছে। এটি হ্যাক (কিছু ক্ষেত্রে) দ্বারা জিইটি-র পরিবর্তে পোস্ট ব্যবহার করে ঠিক করা যেতে পারে তবে পরিষ্কার উপায় হ'ল সার্ভার-সাইড পুনর্নির্দেশ করা। সার্ভারের দিকটি পুনর্নির্দেশের সাথে নেতিবাচক দিকটি হ'ল 304 পুনঃনির্দেশের কারণে এটি এই লিঙ্কগুলির জন্য একটি অতিরিক্ত HTTP কল সৃষ্টি করবে।
2. অতিরিক্ত <form>উপাদান যুক্ত করে
3. একাধিক ফর্মগুলি ব্যবহার করার সময় এলিমেন্টের অবস্থানটি মুশকিল হতে পারে এবং প্রতিক্রিয়াশীল ডিজাইনের সাথে কাজ করার সময় আরও খারাপ হতে পারে। কিছু সজ্জা উপাদানগুলির ক্রমের উপর নির্ভর করে এই সমাধানটি অর্জন করা অসম্ভব হয়ে উঠতে পারে। নকশা যদি এই চ্যালেঞ্জের দ্বারা প্রভাবিত হয় তবে এটি ব্যবহারের ক্ষেত্রে প্রভাব ফেলতে পারে।

সমাধান 2: জাভাস্ক্রিপ্ট ব্যবহার করে।

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

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

পেশাদাররা:

1. অতিরিক্ত (ফর্মাল প্রয়োজনের জন্য) সহজ এবং শব্দাবলীর বজায় রাখুন extra
2. যেহেতু এটি একটি আসল বোতাম, তাই এটি বাস্তব বোতামের মতোও কাজ করবে (যেমন: ড্রাগাগুলি আচরণ এবং / অথবা সক্রিয় অবস্থায় স্পেস বারটি টিপানোর সময় একটি ক্লিক নকল করুন)।

কনস:

1. জাভাস্ক্রিপ্ট দরকার যার অর্থ কম অ্যাক্সেসযোগ্য। এটি কোনও বেস (মূল) উপাদান যেমন লিঙ্কের জন্য আদর্শ নয়।

সমাধান 3: অ্যাঙ্কর (লিঙ্ক) বোতামের মতো স্টাইলযুক্ত।

কোনও বোতামের মতো লিঙ্ককে স্টাইল করা তুলনামূলকভাবে সহজ এবং বিভিন্ন ব্রাউজারে একইরকম অভিজ্ঞতা সরবরাহ করতে পারে। বুটস্ট্র্যাপ এটি করে তবে সাধারণ স্টাইলগুলি ব্যবহার করে এটি নিজেরাই অর্জন করা সহজ।

পেশাদাররা:

1. সরল (প্রাথমিক প্রয়োজনীয়তার জন্য) এবং ভাল ক্রস-ব্রাউজার সমর্থন।
2. <form>কাজ করার দরকার নেই ।
3. কাজ করার জন্য জাভাস্ক্রিপ্টের দরকার নেই।

কনস:

1. শব্দার্থক এক ধরণের ভাঙা, কারণ আপনি একটি বোতাম চান যা একটি লিঙ্কের মতো কাজ করে এবং একটি লিঙ্ক নয় যা বোতামের মতো কাজ করে।
2. এটি # 1 সমাধানের সমস্ত আচরণ পুনরুত্পাদন করবে না। এটি বোতামের মতো একই আচরণকে সমর্থন করবে না। উদাহরণস্বরূপ, টেনে আনার সময় লিঙ্কগুলি ভিন্নভাবে প্রতিক্রিয়া জানায়। এছাড়াও "স্পেস বার" লিঙ্ক ট্রিগার কিছু অতিরিক্ত জাভাস্ক্রিপ্ট কোড ছাড়া কাজ করবে না। এটি অনেক জটিলতা যুক্ত করবে যেহেতু ব্রাউজারগুলি কীভাবে keypressবোতামগুলিতে ইভেন্টগুলি সমর্থন করে তার সাথে সামঞ্জস্য হয় না ।

উপসংহার

সমাধান # 1 ( একটি আকারে বোতাম) ) প্রয়োজনীয় ন্যূনতম কাজের ব্যবহারকারীদের জন্য সর্বাধিক স্বচ্ছ বলে মনে হচ্ছে। যদি আপনার লেআউটটি এই পছন্দটি দ্বারা প্রভাবিত না হয় এবং সার্ভারের পক্ষের টুইটগুলি সম্ভব হয় তবে অ্যাক্সেসযোগ্যতার ক্ষেত্রে শীর্ষস্থানীয় (যেমন একটি ত্রুটির পৃষ্ঠায় লিঙ্ক বা ত্রুটি বার্তাগুলির লিঙ্ক) ক্ষেত্রে এটি ক্ষেত্রে একটি ভাল বিকল্প।

যদি জাভাস্ক্রিপ্ট আপনার অ্যাক্সেসযোগ্যতার প্রয়োজনীয়তার ক্ষেত্রে কোনও বাধা না হয়ে থাকে তবে সমাধান # 2 ( জাভাস্ক্রিপ্ট ) # 1 এবং # 3 এর চেয়ে বেশি পছন্দ করা হবে।

যদি কোনও কারণে অ্যাক্সেসযোগ্যতা গুরুত্বপূর্ণ (জাভাস্ক্রিপ্ট কোনও বিকল্প নয়) তবে আপনি এমন পরিস্থিতিতে আছেন যেখানে আপনার নকশা এবং / অথবা আপনার সার্ভার কনফিগারেশন আপনাকে বিকল্প # 1 ব্যবহার করতে বাধা দিচ্ছে, তাহলে সমাধান # 3 ( বোতামের মতো স্টাইলযুক্ত অ্যাঙ্কর ) সর্বনিম্ন ব্যবহারযোগ্যতার প্রভাব সহ এই সমস্যার সমাধান করা একটি ভাল বিকল্প।

Answer 10

একটি রেফারেন্স ট্যাগের ভিতরে কেন কেবল আপনার বোতামটি রাখবেন না

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

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

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

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

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

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

আমার প্রকল্পের কাঠামো যদি ...

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

..public
|||| ..এইচটিএমএল
|||| |||| -main.html
|||| |||| -secondary.html

যদি আমি মেনইচটিএমটি খুলি তবে ইউআরএলটি হ'ল,

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

যাইহোক, আমি যখন মাধ্যমিক এইচটিএমএল পরিবর্তন করতে মেইন এইচটিটিএমএলের বোতামটি ক্লিক করেছি তখন ইউআরএলটি হবে,

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

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

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

তবুও? মূল চিত্রটি ইউআরএল ইউআরএল শেষে _ _জট = এক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্স, এক্স আপনার নিজের সংযোগ দ্বারা নির্ধারিত হয়েছে সুতরাং স্পষ্টতই আমার সমান হবে না।

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

Answer 11

আপনি উপাদানটির চারপাশে কেবল একটি ট্যাগ রাখতে পারেন:

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

https://jsfiddle.net/hj6gob8b/

Comments

না, আপনি পারবেন না। এইচটিএমএল <button>ভিতরে বাসা বাঁধতে নিষেধ করে <a>।

— কোয়ান্টিন

এটি মূলত বছরগুলির আগের থেকেই এই উত্তরটির সমান ।

— কোয়ান্টিন

এটি যদি এটি নিষেধ করে তবে এটি কেন কাজ করে? :) কোনও গুরুতর বিকাশকারী

— ডাব্লু 3 সি বৈধকারীর যাবতীয় কথার দিকে

@ উরিহসভিক্টর এটি আজ কাজ করতে পারে তবে একদিন ব্রাউজার বিক্রেতারা বৈধ না হওয়ার কারণে আচরণটি পরিবর্তন করার সিদ্ধান্ত নিতে পারে।

— জ্যাকব আলভারেজ

@ উরিহসভিটিকার ফ্ল্যাশ এবং জাভা অ্যাপলেটগুলি খুব সাধারণ ছিল।

— জ্যাকব আলভারেজ

Answer 12

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

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

Comments

আমি মনে করি তিনি কেবল কার্যকারিতা (ক্লিক) নয়, উপস্থিতি সম্পর্কেও কথা বলছেন।

@ ওয়েব লজিক হ্যাঁ, এজন্য আমি বোতামটির মতো দেখতে লিঙ্কটি স্টাইলিংয়ের কথা বলছি।

— পেক্কা 25'10

@ ক্রিসমারিসিক অনক্লিক ব্যবহারের অনেকগুলি ডাউনসাইড রয়েছে: এটি জেএস বন্ধ করে দিয়ে কাজ করে না; ব্যবহারকারী কোনও নতুন ট্যাব / উইন্ডোতে কোনও লিঙ্ক খুলতে পারবেন না, ভাগ করার জন্য লিঙ্কটি তাদের ক্লিপবোর্ডে অনুলিপি করতে পারবেন না; পার্সার এবং বটগুলি লিঙ্কটি সনাক্ত এবং অনুসরণ করতে সক্ষম হবে না; একটি "প্রিফেচ" বৈশিষ্ট্যযুক্ত ব্রাউজারগুলি লিঙ্কটি সনাক্ত করতে পারে না; এবং আরো অনেক.

— পেক্কা

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

— ক্রিস মেরিসিক

Answer 13

আরও কয়েক জন যা যুক্ত করেছে তার সাথে সাথে আপনি কেবল পিএইচপি, কোনও জিকুয়েরি কোড, সহজ সরল এইচটিএমএল এবং সিএসএসবিহীন একটি সাধারণ সিএসএস ক্লাস ব্যবহার করে বুনো যেতে পারেন ।

একটি সিএসএস ক্লাস তৈরি করুন এবং এটি আপনার অ্যাঙ্কারে যুক্ত করুন। কোডটি নীচে রয়েছে।

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

হ্যাঁ, ওটাই. এটি করা খুব সহজ এবং আপনাকে যেমন আপনি চান সৃজনশীল হতে দেয়। আপনি রঙগুলি, আকার, আকারগুলি (ব্যাসার্ধ) ইত্যাদি নিয়ন্ত্রণ করুন আরও বিশদ বিবরণের জন্য, আমি যে সাইটটি পেয়েছি তা দেখুন ।

Answer 14

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

আপনার বোতামটিতে তিনটি নেস্টেড টুকরা থাকবে: একটি ডিভ র‍্যাপার, অ্যাঙ্কর এবং এইচ 1, এর মতো:

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

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

এখানে একটি জেএসফিডাল এটি চেক আউট এবং এটির সাথে প্রায় খেলা।

এই সেটআপের উপকারিতা: ১. ডিভ র‍্যাপার প্রদর্শন করা: ব্লকটি কেন্দ্রিক করা সহজ করে (মার্জিন: ০ অটো ব্যবহার করে) এবং অবস্থান (যখন একটি <a> ইনলাইন এবং পজিশনে শক্ত এবং কেন্দ্রে সম্ভব নয়)।

2. আপনি কেবল <a> প্রদর্শন করতে পারেন: ব্লক করুন, এটিকে চারপাশে সরিয়ে ফেলুন এবং এটিকে একটি বোতামের মতো স্টাইল করুন তবে তারপরে উল্লম্বভাবে পাঠ্যটিকে সারিবদ্ধ করা শক্ত হয়ে যায়।

3. এটি আপনাকে <a> ডিসপ্লে: ইনলাইন-টেবিল এবং <h1> প্রদর্শন: টেবিল-সেল তৈরি করতে দেয় যা আপনাকে উল্লম্ব-সারিবদ্ধ: <h1> এর মাঝখানে এবং এটি উল্লম্বভাবে কেন্দ্র করতে সহায়তা করে (যা সর্বদা সুন্দর একটি বোতাম). হ্যাঁ, আপনি প্যাডিং ব্যবহার করতে পারেন, তবে আপনি যদি চান আপনার বোতামটি গতিশীল আকারে পরিবর্তন করতে পারে তবে এটি পরিষ্কার হবে না।

4. কখনও কখনও আপনি যখন <বিভাজনের মধ্যে <a> এম্বেড করেন কেবলমাত্র পাঠ্য ক্লিকযোগ্য হয়, এই সেটআপটি পুরো বোতামটি ক্লিকযোগ্য করে তোলে।

5. আপনি যদি কেবল অন্য পৃষ্ঠায় যাওয়ার চেষ্টা করছেন তবে আপনাকে ফর্মগুলি নিয়ে কাজ করতে হবে না। ফর্মগুলি তথ্য ইনপুট করার জন্য, এবং সেগুলি এর জন্য সংরক্ষণ করা উচিত।

6. একে অপরের কাছ থেকে বোতাম স্টাইলিং এবং পাঠ্য স্টাইলিংকে পরিষ্কারভাবে পৃথক করার অনুমতি দেয় (প্রসারিত সুবিধা? অবশ্যই, তবে সিএসএস কদর্য চেহারা পেতে পারে তাই এটি পচে যাওয়া ভাল)।

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

Comments

আপনি আসলে কোনও সিএসএস ছাড়াই যুক্তিসঙ্গত বোতামটি পাবেন

— সোরেন

Answer 15

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

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

Answer 16

আরেকটি বিকল্প হ'ল বোতামে একটি লিঙ্ক তৈরি করা:

<button type="button"><a href="yourlink.com">Link link</a></button>

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

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

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

Comments

অনুমানটি মনে রাখবেন এটি বৈধ নয় কারণ বোতামগুলিতে কোনও ইন্টারেক্টিভ বংশধর থাকা উচিত নয়। w3.org/TR/2011/WD-html5-20110525/the-button-element.html

— lukeocom

আপনারা দুজনেই ঠিক আছেন। ভিএস2015 এটি একটি সতর্কবার্তা সহ পতাকাঙ্কিত করেছে: "এলিমেন্ট 'এ' উপাদান 'বোতামের অভ্যন্তরে বাসাতে পারে না" তবে এটি কাজ করে: আইই 11, এজ, ক্রোম, ফায়ারফক্স, সাফারি এবং কমপক্ষে কিছু (সম্ভবত সমস্ত) মোবাইল ব্রাউজারগুলি। সুতরাং এই কৌশলটি ব্যবহার করবেন না তবে আপনি যদি অতীতে করেন তবে এটি এখনের জন্য কাজ করে;)

— জেক ২২

Answer 17

আপনি যদি কোনও 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;
}

Answer 18

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

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

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

// 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://stackoverflow.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>

Answer 19

এটি করার 7 টি উপায়:

1. ব্যবহার window.location.href = 'URL'
2. ব্যবহার window.location.replace('URL')
3. ব্যবহার window.location = 'URL'
4. ব্যবহার window.open('URL')
5. ব্যবহার window.location.assign('URL')
6. এইচটিএমএল ফর্ম ব্যবহার করে
7. এইচটিএমএল অ্যাঙ্কর ট্যাগ ব্যবহার করে

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

Answer 20

এইচটিএমএল 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>

Comments

বৈধতা দেয় না। ভ্যালিডেটর.ওয়ু.আর.এস.এনউ / টু টেক্সট্রেয়ায় আটকানো ত্রুটি

— মার্ক আমেরিকা

Answer 21

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

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

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

Answer 22

যদি আপনি এসএসএল শংসাপত্র ব্যবহার করেন

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

Answer 23

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

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

বোতামটি এখন / সাবমিট বোতাম (এইচটিএমএল 5) হিসাবে পছন্দ করা হয় is আমি প্রায় চেষ্টা করেছি এবং এই পদ্ধতিটি পেয়েছি।

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

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

এখানে একটি বেহালতা:

জেএস ফিডল

Comments

বোতামের টাইপ = "বোতাম" সেট করুন, যা আপনাকে ফর্মটি জমা না দিয়েই এটিতে ক্লিক করতে দেয়।

— ব্লেক এ। নিকোলস

Answer 24

আমি বর্তমানে যে ওয়েবসাইটটিতে কাজ করছি তার জন্য এটি ব্যবহার করেছি এবং এটি দুর্দান্ত কাজ করে !. আপনি যদি কিছু দুর্দান্ত স্টাইলিং চান তবে আমি সিএসএসটি এখানে রাখব।

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

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

এখানে কাজ করছেন জেএসফিডল ।

Answer 25

আপনি বোতামগুলিকে 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>

এইভাবে প্রথম বোতামটি ব্যবহারকারীকে পুনঃনির্দেশ করে, যখন দ্বিতীয়টি ফর্মটি জমা দেয়।

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

Comments

এলিমেন্ট 'বাটন' এলিমেন্ট 'এ' এর মধ্যে বাসা বাঁধতে পারে না।

— এরিয়াস

স্ট্যান্ডার্ড নং অনুসারে, তবে আমার অভিজ্ঞতাতে এটি যদিও ঠিক কাজ করে। ক্রস ব্রাউজারটি এখনও এটি ব্যাপকভাবে পরীক্ষা করে দেখা যায় নি, তবে কমপক্ষে এফএফ এবং ক্রোম এটি প্রত্যাশিত আচরণের সাথে ঠিকঠাকভাবে পরিচালনা করবে বলে মনে হচ্ছে।

— অ্যান্ডার্স মার্টিনি

আরিয়াস: কিছুটা পড়ুন, আরও কিছু পরীক্ষা-নিরীক্ষা করে দেখতে পেলেন যে একটি বোতামের উপাদানটি আসলে << উপাদানটির অভ্যন্তরে বাসা বাঁধতে পারে, যতক্ষণ না বোতামের উপাদানটির নিজস্ব ক্রিয়া প্রয়োগ না করা হয় (যেহেতু এটি সম্ভবত ফলশ্রুতিতে ফলাফল করে দ্বন্দ্ব - ব্রাউজারটি কোন ক্রিয়াটি সম্পাদন করবে? বোতামগুলি বা <a> এর?) তবে যতক্ষণ আপনি নিশ্চিত হন যে বোতাম-উপাদান নিজেই একবার ক্লিক করলে কোনও ক্রিয়াকলাপ শুরু হয় না, এটি ঠিক কাজ করা উচিত (সম্ভবত উচিৎ ' যদিও সেরা অনুশীলন হিসাবে বিবেচিত হবে)

— অ্যান্ডার্স মার্টিনি

এটা সম্ভাবনা সম্পর্কে নয়। এটি ঠিক এইচটিএমএল 5 নির্দিষ্টকরণের বিরুদ্ধে।

— আরিয়াস

Answer 26

আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

http://www.google.comআপনার ওয়েবসাইটের সাথে প্রতিস্থাপন করুন , http://ইউআরএল এর আগে অন্তর্ভুক্ত করা নিশ্চিত করুন ।

Answer 27

জাভাস্ক্রিপ্টে

setLocation(base: string) {
  window.location.href = base;
}

এইচটিএমএলে

<button onclick="setLocation('/<whatever>')>GO</button>"

Answer 28

আপনার ব্রাউজার কনসোলে টাইপ করুন window.locationএবং টিপুন enter। তারপরে আপনি কী locationরয়েছে তা পরিষ্কার ধারণা পেতে পারেন

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

আপনি এখান থেকে যে কোনও মান সেট করতে পারেন।

সুতরাং অন্য পৃষ্ঠা পুনর্নির্দেশের জন্য আপনি hrefআপনার লিঙ্কের সাথে মান সেট করতে পারেন ।

   window.location.href = your link

আপনার ক্ষেত্রে-

   <button onclick="window.location.href='www.google.com'">Google</button>

Answer 29

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

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

Answer 30

আপনি যদি আপনার ওয়েবসাইটের মধ্যে থাকা পৃষ্ঠাগুলির জন্য পুনর্নির্দেশ করতে চান, তবে আমার পদ্ধতিটি এখানে রয়েছে - আমি বোতামে href বৈশিষ্ট্যটি যুক্ত করেছি , এবং অনিক ক্লিক করে এই বরাদ্দ করা হয়েছে getআগ্রিট্রিবিউট ('href') সাথে ডকুমেন্ট.লোকেশন।

** আপনি যদি 'এক্স-ফ্রেম-বিকল্পগুলি' এর কারণে 'সমরিগিন'-এর জন্য URL এর আউটসাইটের জন্য উল্লেখ করেন তবে এটি কাজ করবে না।

কোডের উদাহরণ:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>