লিঙ্কের মতো দেখতে কীভাবে বোতামটি তৈরি করবেন?

Question

সিএসএস ব্যবহার করে আমার একটি লিঙ্কের মতো দেখতে একটি বোতাম তৈরি করা দরকার। পরিবর্তনগুলি হয়ে গেছে তবে আমি যখন এটিতে ক্লিক করি তখন এটি প্রদর্শিত হয় যেন এটি কোনও বোতামের মতো ধাক্কা দেয়। কীভাবে এটিকে সরিয়ে ফেলার কোনও ধারণা, যাতে ক্লিক করার পরেও বোতামটি একটি লিঙ্ক হিসাবে কাজ করে?

Comments

লিঙ্কগুলিতে

— অন্লিক ইভেন্টগুলি

@ ক্নিটল, @ ক্ল্যাটাস প্রকৃতপক্ষে, লিঙ্কগুলি এবং বোতামগুলির এইচটিএমএলে খুব আলাদা অর্থ রয়েছে। আপনার Ww.org.org / specs/web-apps/current-work/m মাল্টিপেজ/ … পড়তে হবে । লিঙ্কের মতো দেখতে স্টাইল বোতামটি রাখা ভাল ধারণা নাও হতে পারে তবে এটি ইউআই ডিজাইনের উপর নির্ভর করে, পরিবর্তে লিংকটি এইচটিএমএল স্প্যাসের বিপরীতে রয়েছে।

— আন্তন স্ট্রোগনফ

লিঙ্কের মতো বোতামটি স্টাইল করার প্রয়োজনীয়তার কয়েকটি কারণ রয়েছে। (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

আমার খুব সামান্যতম প্রকরণটি - এই পাঠ্য-সজ্জাটি সরানো হয়েছে: বোতামটিতে কাজ করার জন্য আন্ডারলাইন বিধি: হোভার h আমার মধ্যে দেখতে forked বেহালার ।

— বিজয়বিডি

আপনি যদি না চান যে সমস্ত বোতামগুলি লিঙ্ক হিসাবে স্টাইল করা হোক button.link {...styles...}তবে তার মতো কিছু দিয়ে শৈলীতে স্কোপ করুন <button class="link">Your button</button>। এটি !importantসর্বদা একটি ভাল ধারণা যা ব্যবহার করা এড়িয়ে যায় ।

— আর্কোনিক

যত্ন নিতে মনে রাখবেন outline। কিছু ব্রাউজার এটিকে বোতামগুলি যুক্ত করে। আপনি সেট করতে পারেন outline-color: transparent।

— সিলিকনমাইন্ড

দয়া করে রূপরেখাটি সরাবেন না কারণ এটি আপনার বোতামটি অ্যাক্সেসযোগ্য করে তুলবে

— ডোমিনিক

পরিবর্তে border-bottomব্যবহার text-decoration:underline।

— 0 ʙᴀᴋᴇʀ

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"]উপাদানগুলিতেও প্রসারিত হতে পারে । আপনি যদি কোনও নির্দিষ্ট বোতামটি অ্যাঙ্কারের মতো দেখতে চান তবে আপনি একটি শ্রেণিও ব্যবহার করতে পারেন।

একটি লাইভ-ডেমো জন্য এই JSFizz দেখুন ।

দয়া করে নোট করুন যে এটি বোতামগুলিতে ডিফল্ট অ্যাঙ্কর-স্টাইলিং প্রয়োগ করে (যেমন নীল পাঠ্য-রঙ)। সুতরাং আপনি যদি অ্যাঙ্কর এবং বোতামের পাঠ্য-বর্ণ বা অন্য কোনও কিছু পরিবর্তন করতে চান তবে উপরের সিএসএসের পরে আপনার এটি করা উচিত ।

---

এই উত্তরের মূল কোড (স্নিপেট দেখুন) সম্পূর্ণ আলাদা এবং অসম্পূর্ণ ছিল।

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

সিএসএস সিউডোক্লাস ব্যবহার করে দেখুন :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>

এই.href এর সাহায্যে আপনি এমনকি আপনার ফাংশনে লিঙ্কের লক্ষ্য অ্যাক্সেস করতে পারেন। return falseক্লিক করা হলে ব্রাউজারগুলি লিঙ্কটি অনুসরণ করা থেকে বিরত রাখবে।

যদি জাভাস্ক্রিপ্ট অক্ষম করা থাকে তবে লিঙ্কটি একটি সাধারণ লিঙ্ক হিসাবে কাজ করবে এবং কেবল লোড করুন some/page.phpj আপনি যদি জেএস অক্ষম ব্যবহারের অক্ষম থাকেন তবে আপনার লিঙ্কটি মারা যেতে চাইবেhref="#"

Comments

আমি এটি ব্যবহার করব তবে কী কী পরিবর্তনগুলি প্রয়োগ করতে হবে তা সম্পর্কে খুব নিশ্চিত নই যাতে বোতামটি ইন্টেন্ট না হয়।

হাঁ। এন এমনকি পদ্দিনকে 0 হিসাবে ইন্ডেন্টেশন দেওয়ার পরেও এখনও রয়েছে

Answer 5

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

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>