এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি বোতাম উপাদান নির্মাণ

রঙ-অভিযোজিত, প্রতিক্রিয়াশীল এবং অ্যাক্সেসযোগ্য <button> উপাদানগুলি কীভাবে তৈরি করবেন তার একটি মৌলিক সারসংক্ষেপ।

Adam Argyle

এই পোস্টে আমি রঙ-অভিযোজিত, প্রতিক্রিয়াশীল এবং অ্যাক্সেসযোগ্য <button> উপাদান কীভাবে তৈরি করতে হয় সে সম্পর্কে আমার চিন্তাভাবনা শেয়ার করতে চাই। ডেমোটি চেষ্টা করে দেখুন এবং উৎসটি দেখুন

হালকা এবং অন্ধকার থিমে কীবোর্ড এবং মাউসের মাধ্যমে বোতামগুলির সাথে ইন্টারঅ্যাক্ট করা হয়।

যদি আপনি ভিডিও পছন্দ করেন, তাহলে এই পোস্টের একটি ইউটিউব সংস্করণ এখানে দেওয়া হল:

সংক্ষিপ্ত বিবরণ

Browser Support

Source

<button> এলিমেন্টটি ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য তৈরি। এর click ইভেন্ট কীবোর্ড, মাউস, টাচ, ভয়েস এবং আরও অনেক কিছু থেকে ট্রিগার হয়, এর সময় সম্পর্কে স্মার্ট নিয়ম সহ। এটি প্রতিটি ব্রাউজারে কিছু ডিফল্ট স্টাইলের সাথে আসে, যাতে আপনি কোনও কাস্টমাইজেশন ছাড়াই সরাসরি সেগুলি ব্যবহার করতে পারেন। ব্রাউজার-প্রদত্ত হালকা এবং গাঢ় বোতামগুলি বেছে নিতে color-scheme ব্যবহার করুন।

এছাড়াও বিভিন্ন ধরণের বোতাম রয়েছে, প্রতিটি পূর্ববর্তী কোডপেন এম্বেডে দেখানো হয়েছে। <button> টাইপ ছাড়া একটি <form> এর মধ্যে থাকার সাথে খাপ খাইয়ে নেবে, সাবমিট টাইপে পরিবর্তন করবে।

<!-- buttons -->
<button></button>
<button type="submit"></button>
<button type="button"></button>
<button type="reset"></button>

<!-- button state -->
<button disabled></button>

<!-- input buttons -->
<input type="button" />
<input type="file">

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

আইকন বোতাম এবং কাস্টমাইজড বোতামগুলির জন্য চমৎকার সংযোজন সহ, ফর্মে নয় বরং একটি ফর্মে দেখানো সমস্ত বোতাম ধরণের চূড়ান্ত সেটের পূর্বরূপ।

স্টাইলিংয়ের জন্য CSS ব্যবহারের জন্য বোতামগুলিতে সিউডো ক্লাসও রয়েছে। এই ক্লাসগুলি বোতামের অনুভূতি কাস্টমাইজ করার জন্য CSS হুক প্রদান করে: :hover যখন একটি মাউস বোতামের উপরে থাকে, :active যখন একটি মাউস বা কীবোর্ড টিপে থাকে, এবং :focus বা :focus-visible যখন সহায়ক প্রযুক্তি স্টাইলিংয়ে সহায়তা করে।

button:hover {}
button:active {}
button:focus {}
button:focus-visible {}

অন্ধকার থিমের সকল ধরণের বোতামের চূড়ান্ত সেটের পূর্বরূপ। — ডার্ক থিমে সকল ধরণের বোতামের চূড়ান্ত সেটের প্রিভিউ

মার্কআপ

HTML স্পেসিফিকেশন দ্বারা প্রদত্ত বোতামের ধরণগুলি ছাড়াও, আমি একটি আইকন সহ একটি বোতাম এবং একটি কাস্টম ক্লাস btn-custom সহ একটি বোতাম যুক্ত করেছি।

<button>Default</button>
<input type="button" value="<input>"/>
<button>
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path d="..." />
  </svg>
  Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom">Custom</button>
<input type="file">

তারপর, পরীক্ষার জন্য, প্রতিটি বোতাম একটি ফর্মের ভিতরে স্থাপন করা হয়। এইভাবে আমি নিশ্চিত করতে পারি যে স্টাইলগুলি ডিফল্ট বোতামের জন্য যথাযথভাবে আপডেট করা হয়েছে, যা একটি সাবমিট বোতামের মতো আচরণ করে। আমি আইকন কৌশলটি ইনলাইন SVG থেকে একটি মাস্কড SVG তেও স্যুইচ করি, যাতে উভয়ই সমানভাবে কাজ করে।

<form>
  <button>Default</button>
  <input type="button" value="<input>"/>
  <button>Icon <span data-icon="cloud"></span></button>
  <button type="submit">Submit</button>
  <button type="button">Type Button</button>
  <button type="reset">Reset</button>
  <button disabled>Disabled</button>
  <button class="btn-custom btn-large" type="button">Large Custom</button>
  <input type="file">
</form>

এই মুহূর্তে সমন্বয়ের ম্যাট্রিক্স বেশ অপ্রতিরোধ্য। বোতামের ধরণ, ছদ্ম-ক্লাস এবং একটি ফর্মের মধ্যে থাকা বা না থাকা, এর মধ্যে ২০ টিরও বেশি বোতামের সমন্বয় রয়েছে। এটি একটি ভালো জিনিস যে CSS আমাদের প্রতিটিকে স্পষ্টভাবে স্পষ্টভাবে বলতে সাহায্য করতে পারে!

অ্যাক্সেসযোগ্যতা

বোতাম উপাদানগুলি স্বাভাবিকভাবেই সহজলভ্য, তবে কিছু সাধারণ উন্নতিও রয়েছে।

একসাথে ঘোরান এবং ফোকাস করুন

আমি :is() ফাংশনাল সিউডো সিলেক্টরের সাথে : :hover এবং :focus একসাথে গ্রুপ করতে পছন্দ করি। এটি নিশ্চিত করতে সাহায্য করে যে আমার ইন্টারফেসগুলি সর্বদা কীবোর্ড এবং সহায়ক প্রযুক্তি শৈলী বিবেচনা করে।

button:is(:hover, :focus) {
  …
}

একটি ডেমো চেষ্টা করুন!

ইন্টারেক্টিভ ফোকাস রিং

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

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

রঙের বৈপরীত্যের উত্তরণ নিশ্চিত করা

হালকা এবং অন্ধকারে কমপক্ষে চারটি ভিন্ন রঙের সংমিশ্রণ রয়েছে যার রঙের বৈপরীত্য বিবেচনা করা প্রয়োজন: বোতাম, জমা বোতাম, রিসেট বোতাম এবং অক্ষম বোতাম। VisBug এখানে তাদের সমস্ত স্কোর একবারে পরিদর্শন এবং দেখানোর জন্য ব্যবহার করা হয়েছে:

যারা দেখতে পাচ্ছেন না তাদের কাছ থেকে আইকন লুকানো

আইকন বোতাম তৈরি করার সময়, আইকনটি বোতামের টেক্সটকে ভিজ্যুয়াল সাপোর্ট প্রদান করবে। এর অর্থ হল দৃষ্টিশক্তি হারানো ব্যক্তির জন্য আইকনটি মূল্যবান নয়। সৌভাগ্যবশত ব্রাউজারটি স্ক্রিন-রিডার প্রযুক্তি থেকে আইটেমগুলি লুকানোর একটি উপায় প্রদান করে যাতে দৃষ্টিশক্তি হারানো ব্যক্তিরা সাজসজ্জার বোতামের ছবি নিয়ে বিরক্ত না হন:

<button>
  <svg … aria-hidden="true">...</svg>
  Icon Button
</button>

Chrome DevTools বোতামের জন্য অ্যাক্সেসিবিলিটি ট্রি দেখাচ্ছে। ট্রিটি বোতামের ছবি উপেক্ষা করে কারণ এতে aria-hidden সত্যে সেট করা আছে।

স্টাইল

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

একটি অভিযোজিত কাস্টম সম্পত্তি কৌশল

এই GUI চ্যালেঞ্জে ব্যবহৃত কাস্টম প্রপার্টি কৌশলটি রঙের স্কিম তৈরিতে ব্যবহৃত কৌশলের সাথে অনেকটাই মিল। একটি অভিযোজিত হালকা এবং গাঢ় রঙের সিস্টেমের জন্য, প্রতিটি থিমের জন্য একটি কাস্টম প্রপার্টি সংজ্ঞায়িত করা হয় এবং সেই অনুযায়ী নামকরণ করা হয়। তারপর থিমের বর্তমান মান ধরে রাখার জন্য একটি একক কাস্টম প্রপার্টি ব্যবহার করা হয় এবং একটি CSS প্রপার্টিতে বরাদ্দ করা হয়। পরে, একক কাস্টম প্রপার্টিটি একটি ভিন্ন মানতে আপডেট করা যেতে পারে, তারপর বোতাম স্টাইল আপডেট করা যেতে পারে।

button {
  --_bg-light: white;
  --_bg-dark: black;
  --_bg: var(--_bg-light);

  background-color: var(--_bg);
}

@media (prefers-color-scheme: dark) {
  button {
    --_bg: var(--_bg-dark);
  }
}

আমার যা ভালো লাগে তা হলো হালকা এবং অন্ধকার থিমগুলি ঘোষণামূলক এবং স্পষ্ট। পরোক্ষতা এবং বিমূর্ততা --_bg কাস্টম প্রোপার্টিতে অফলোড করা হয়, যা এখন একমাত্র "প্রতিক্রিয়াশীল" প্রোপার্টি; --_bg-light এবং --_bg-dark স্ট্যাটিক। এটাও স্পষ্ট যে হালকা থিমটি ডিফল্ট থিম এবং অন্ধকার কেবল শর্তসাপেক্ষে প্রয়োগ করা হয়।

নকশার ধারাবাহিকতার জন্য প্রস্তুতি নিচ্ছেন

শেয়ার করা নির্বাচক

নিম্নলিখিত নির্বাচকটি বিভিন্ন ধরণের বোতামগুলিকে লক্ষ্য করার জন্য ব্যবহৃত হয় এবং প্রথমে এটি কিছুটা ভারী। :where() ব্যবহার করা হয় তাই বোতামটি কাস্টমাইজ করার জন্য কোনও নির্দিষ্টতার প্রয়োজন হয় না। বোতামগুলি প্রায়শই বিকল্প পরিস্থিতির জন্য অভিযোজিত হয় এবং :where() নির্বাচক নিশ্চিত করে যে কাজটি সহজ। :where() এর ভিতরে, প্রতিটি বোতামের ধরণ নির্বাচন করা হয়, যার মধ্যে ::file-selector-button অন্তর্ভুক্ত থাকে, যা :is() বা :where() এর ভিতরে ব্যবহার করা যায় না ।

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  …
}

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

বোতামের অ্যাকসেন্ট রঙ

রঙের এক পপ ব্যবহারের জন্য সাবমিট বোতাম এবং আইকনগুলি একটি দুর্দান্ত জায়গা:

--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);

বোতামের টেক্সটের রঙ

বোতামের টেক্সটের রঙ সাদা বা কালো নয়, এগুলি --_accent এর গাঢ় বা হালকা সংস্করণ যা hsl() ব্যবহার করে এবং 210 রঙে লেগে থাকে:

--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);

বোতামের পটভূমির রঙ

হালকা থিম বোতাম ছাড়া বোতামের ব্যাকগ্রাউন্ডগুলি একই hsl() প্যাটার্ন অনুসরণ করে—এগুলি সাদা রঙে সেট করা হয় যাতে তাদের পৃষ্ঠ ব্যবহারকারীর কাছাকাছি বা অন্যান্য পৃষ্ঠের সামনে প্রদর্শিত হয়:

--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);

বোতামের পটভূমি ওয়েল

এই ব্যাকগ্রাউন্ড রঙটি একটি পৃষ্ঠকে অন্য পৃষ্ঠের পিছনে দেখানোর জন্য, যা ফাইল ইনপুটের ব্যাকগ্রাউন্ডের জন্য কার্যকর:

--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);

বোতাম প্যাডিং

বোতামের টেক্সটের চারপাশের ব্যবধান ch ইউনিট ব্যবহার করে করা হয়, যা ফন্টের আকারের সাথে আপেক্ষিক দৈর্ঘ্য। যখন বড় বোতামগুলি কেবল font-size এবং বোতামের স্কেলগুলি আনুপাতিকভাবে বাড়াতে সক্ষম হয় তখন এটি গুরুত্বপূর্ণ হয়ে ওঠে:

--_padding-inline: 1.75ch;
--_padding-block: .75ch;

বোতামের সীমানা

বোতামের বর্ডার রেডিয়াসটি একটি কাস্টম প্রোপার্টিতে স্ট্যাশ করা হয় যাতে ফাইল ইনপুট অন্যান্য বোতামের সাথে মেলে। বর্ডারের রঙগুলি প্রতিষ্ঠিত অভিযোজিত রঙ সিস্টেম অনুসরণ করে:

--_border-radius: .5ch;

--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);

বোতাম হোভার হাইলাইট প্রভাব

এই বৈশিষ্ট্যগুলি ইন্টারঅ্যাকশনের উপর ট্রানজিশনের জন্য একটি আকারের বৈশিষ্ট্য স্থাপন করে এবং হাইলাইট রঙটি অভিযোজিত রঙ সিস্টেম অনুসরণ করে। আমরা এই পোস্টে পরে কীভাবে ইন্টারঅ্যাক্ট করি তা কভার করব, তবে শেষ পর্যন্ত এগুলি একটি box-shadow প্রভাবের জন্য ব্যবহৃত হয়:

--_highlight-size: 0;

--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);

বোতাম টেক্সট শ্যাডো

প্রতিটি বোতামে একটি সূক্ষ্ম টেক্সট শ্যাডো স্টাইল রয়েছে। এটি টেক্সটটিকে বোতামের উপরে বসাতে সাহায্য করে, সুস্পষ্টতা উন্নত করে এবং উপস্থাপনা পলিশের একটি সুন্দর স্তর যোগ করে।

--_ink-shadow-light: 0 1px 0 var(--_border-light);
--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
--_ink-shadow: var(--_ink-shadow-light);

বোতাম আইকন

আপেক্ষিক দৈর্ঘ্য ch ইউনিটের কারণে আইকনগুলির আকার দুটি অক্ষরের সমান, যা আইকনটিকে বোতামের পাঠ্যের আনুপাতিকভাবে স্কেল করতে সাহায্য করবে। অভিযোজিত এবং থিমের মধ্যে রঙের জন্য আইকনের রঙ --_accent-color এর উপর নির্ভর করে।

--_icon-size: 2ch;
--_icon-color: var(--_accent);

বোতামের ছায়া

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

--_shadow-color-light: 220 3% 15%;
--_shadow-color-dark: 220 40% 2%;
--_shadow-color: var(--_shadow-color-light);

--_shadow-strength-light: 1%;
--_shadow-strength-dark: 25%;
--_shadow-strength: var(--_shadow-strength-light);

অভিযোজিত রঙ এবং শক্তি দিয়ে আমি দুটি গভীরতার ছায়া একত্রিত করতে পারি:

--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));

--_shadow-2: 
  0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
  0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));

তদুপরি, বোতামগুলিকে কিছুটা 3D চেহারা দেওয়ার জন্য, 1px বক্স-শ্যাডো এই বিভ্রম তৈরি করে:

--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);

বোতাম ট্রানজিশন

অভিযোজিত রঙের প্যাটার্ন অনুসরণ করে, আমি ডিজাইন সিস্টেম বিকল্পগুলি ধরে রাখার জন্য দুটি স্ট্যাটিক বৈশিষ্ট্য তৈরি করি:

--_transition-motion-reduce: ;
--_transition-motion-ok:
  box-shadow 145ms ease,
  outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);

দ্রষ্টব্য: বোতামগুলির প্রাথমিক ডিজাইনগুলিতে, আমি border-color অ্যানিমেশন করেছিলাম, যা --_transition-motion-reduce প্রোপার্টিতে ছিল। পরে আমি এটি সরিয়ে দিয়েছিলাম কিন্তু প্যাটার্নটি রেখে দিয়েছিলাম যদি আমি আবার আমার মন পরিবর্তন করি।

নির্বাচকের মধ্যে সমস্ত বৈশিষ্ট্য একসাথে

একটি নির্বাচকের সমস্ত কাস্টম বৈশিষ্ট্য

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  --_accent-light: hsl(210 100% 40%);
  --_accent-dark: hsl(210 50% 70%);
  --_accent: var(--_accent-light);

--_text-light: hsl(210 10% 30%);
  --_text-dark: hsl(210 5% 95%);
  --_text: var(--_text-light);

--_bg-light: hsl(0 0% 100%);
  --_bg-dark: hsl(210 9% 31%);
  --_bg: var(--_bg-light);

--_input-well-light: hsl(210 16% 87%);
  --_input-well-dark: hsl(204 10% 10%);
  --_input-well: var(--_input-well-light);

--_padding-inline: 1.75ch;
  --_padding-block: .75ch;

--_border-radius: .5ch;
  --_border-light: hsl(210 14% 89%);
  --_border-dark: var(--_bg-dark);
  --_border: var(--_border-light);

--_highlight-size: 0;
  --_highlight-light: hsl(210 10% 71% / 25%);
  --_highlight-dark: hsl(210 10% 5% / 25%);
  --_highlight: var(--_highlight-light);

--_ink-shadow-light: 0 1px 0 hsl(210 14% 89%);
  --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
  --_ink-shadow: var(--_ink-shadow-light);

--_icon-size: 2ch;
  --_icon-color-light: var(--_accent-light);
  --_icon-color-dark: var(--_accent-dark);
  --_icon-color: var(--accent, var(--_icon-color-light));

--_shadow-color-light: 220 3% 15%;
  --_shadow-color-dark: 220 40% 2%;
  --_shadow-color: var(--_shadow-color-light);
  --_shadow-strength-light: 1%;
  --_shadow-strength-dark: 25%;
  --_shadow-strength: var(--_shadow-strength-light);
  --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
  --_shadow-2: 
    0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%))
  ;

--_shadow-depth-light: hsl(210 14% 89%);
  --_shadow-depth-dark: var(--_bg-dark);
  --_shadow-depth: var(--_shadow-depth-light);

--_transition-motion-reduce: ;
  --_transition-motion-ok:
    box-shadow 145ms ease,
    outline-offset 145ms ease
  ;
  --_transition: var(--_transition-motion-reduce);
}

গাঢ় থিমের অভিযোজন

ডার্ক থিম প্রপস সেট করা হলে -light এবং -dark স্ট্যাটিক প্রপস প্যাটার্নের মান স্পষ্ট হয়ে ওঠে:

@media (prefers-color-scheme: dark) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_bg: var(--_bg-dark);
    --_text: var(--_text-dark);
    --_border: var(--_border-dark);
    --_accent: var(--_accent-dark);
    --_highlight: var(--_highlight-dark);
    --_input-well: var(--_input-well-dark);
    --_ink-shadow: var(--_ink-shadow-dark);
    --_shadow-depth: var(--_shadow-depth-dark);
    --_shadow-color: var(--_shadow-color-dark);
    --_shadow-strength: var(--_shadow-strength-dark);
  }
}

এটি কেবল ভালো পড়ার মতোই নয়, বরং এই কাস্টম বোতামগুলির গ্রাহকরা আত্মবিশ্বাসের সাথে বেয়ার প্রপস ব্যবহার করতে পারবেন যে তারা ব্যবহারকারীর পছন্দের সাথে যথাযথভাবে খাপ খাইয়ে নেবেন।

গতি অভিযোজন হ্রাস

যদি এই ভিজিটিং ব্যবহারকারীর সাথে গতি ঠিক থাকে, তাহলে --_transition var(--_transition-motion-ok) এ বরাদ্দ করুন:

@media (prefers-reduced-motion: no-preference) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_transition: var(--_transition-motion-ok);
  }
}

কিছু শেয়ার করা স্টাইল

বোতাম এবং ইনপুটগুলির ফন্টগুলি inherit সেট করা উচিত যাতে তারা পৃষ্ঠার বাকি ফন্টগুলির সাথে মেলে; অন্যথায় সেগুলি ব্রাউজার দ্বারা স্টাইল করা হবে। এটি letter-spacing ক্ষেত্রেও প্রযোজ্য। line-height 1.5 এ সেট করলে লেটার বক্সের আকার সেট হয় যাতে টেক্সটের উপরে এবং নীচে কিছু জায়গা থাকে:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  /* …CSS variables */

  font: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
  border-radius: var(--_border-radius);
}

স্টাইলিং বোতাম

নির্বাচক সমন্বয়

selector input[type="file"] ইনপুটের বোতাম অংশ নয়, বরং pseudo-element ::file-selector-button , তাই আমি তালিকা থেকে input[type="file"] সরিয়ে ফেলেছি:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  
}

কার্সার এবং স্পর্শ সমন্বয়

প্রথমে আমি কার্সারটিকে pointer স্টাইলে স্টাইল করি, যা বোতামটিকে মাউস ব্যবহারকারীদের কাছে ইঙ্গিত করতে সাহায্য করে যে এটি ইন্টারেক্টিভ। তারপর আমি touch-action: manipulation যোগ করি যাতে ক্লিকগুলিকে অপেক্ষা করতে না হয় এবং সম্ভাব্য ডাবল ক্লিক পর্যবেক্ষণ করতে না হয়, যার ফলে বোতামগুলি দ্রুত অনুভূত হয়:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
  touch-action: manipulation;
}

দ্রষ্টব্য: HTML ডকুমেন্টে <meta name="viewport" content="width=device-width"> থাকলে touch-action: manipulation প্রয়োজন নেই। Chrome Developers সম্পর্কে আরও জানুন এখানে ।

রঙ এবং সীমানা

এরপর আমি পূর্বে প্রতিষ্ঠিত কিছু অভিযোজিত কাস্টম বৈশিষ্ট্য ব্যবহার করে ফন্টের আকার, পটভূমি, পাঠ্য এবং সীমানার রঙগুলি কাস্টমাইজ করব:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  font-size: var(--_size, 1rem);
  font-weight: 700;
  background: var(--_bg);
  color: var(--_text);
  border: 2px solid var(--_border);
}

ছায়া

বোতামগুলিতে কিছু দুর্দান্ত কৌশল প্রয়োগ করা হয়েছে। text-shadow আলো এবং অন্ধকারের সাথে খাপ খাইয়ে নেয়, যা ব্যাকগ্রাউন্ডের উপরে সুন্দরভাবে বসা বোতাম টেক্সটের একটি মনোরম সূক্ষ্ম চেহারা তৈরি করে। box-shadow জন্য, তিনটি ছায়া বরাদ্দ করা হয়েছে। প্রথমটি, --_shadow-2 , একটি নিয়মিত বক্স ছায়া। দ্বিতীয় ছায়াটি চোখের জন্য একটি কৌশল যা বোতামটিকে কিছুটা বেভেল করা দেখায়। শেষ ছায়াটি হোভার হাইলাইটের জন্য, প্রাথমিকভাবে 0 আকারে, তবে এটি পরে একটি আকার দেওয়া হবে এবং রূপান্তরিত হবে যাতে এটি বোতাম থেকে বড় হয়।

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  box-shadow: 
    var(--_shadow-2),
    var(--_shadow-depth),
    0 0 0 var(--_highlight-size) var(--_highlight)
  ;
  text-shadow: var(--_ink-shadow);
}

লেআউট

আমি বোতামটিকে একটি ফ্লেক্সবক্স লেআউট দিয়েছি, বিশেষ করে একটি inline-flex লেআউট যা এর বিষয়বস্তুর সাথে মানানসই হবে। তারপর আমি টেক্সটটি কেন্দ্রে রাখি এবং উল্লম্বভাবে এবং অনুভূমিকভাবে শিশুদের কেন্দ্রে সারিবদ্ধ করি। এটি আইকন এবং অন্যান্য বোতাম উপাদানগুলিকে সঠিকভাবে সারিবদ্ধ করতে সাহায্য করবে।

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

ব্যবধান

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

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  gap: 1ch;
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
}

টাচ এবং মাউস ইউএক্স

এই পরবর্তী বিভাগটি মূলত মোবাইল ডিভাইসে টাচ ব্যবহারকারীদের জন্য। প্রথম বৈশিষ্ট্য, user-select , সকল ব্যবহারকারীর জন্য; এটি বোতামের টেক্সট হাইলাইট করতে বাধা দেয়। এটি বেশিরভাগ ক্ষেত্রে টাচ ডিভাইসে লক্ষণীয় যখন একটি বোতাম ট্যাপ করে ধরে রাখা হয় এবং অপারেটিং সিস্টেম বোতামের টেক্সট হাইলাইট করে।

আমি সাধারণত দেখেছি যে বিল্ট-ইন অ্যাপগুলিতে বোতাম ব্যবহার করে ব্যবহারকারীর অভিজ্ঞতা এটি নয়, তাই আমি user-select কে none এ সেট করে এটি অক্ষম করি। Tap highlight colors ( -webkit-tap-highlight-color ) এবং অপারেটিং সিস্টেমের প্রসঙ্গ মেনু ( -webkit-touch-callout ) হল অন্যান্য ওয়েব-কেন্দ্রিক বোতাম বৈশিষ্ট্য যা সাধারণ বোতাম ব্যবহারকারীর প্রত্যাশার সাথে সামঞ্জস্যপূর্ণ নয়, তাই আমি সেগুলিও সরিয়ে ফেলি।

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

রূপান্তর

অ্যাডাপ্টিভ --_transition ভ্যারিয়েবলটি ট্রানজিশন প্রোপার্টিতে বরাদ্দ করা হয়েছে:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  …

  transition: var(--_transition);
}

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

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):where(:not(:active):hover) {
  --_highlight-size: .5rem;
}

দ্রষ্টব্য: নির্বাচক থেকে ::file-selector-button বাদ দেওয়া হয়েছে কারণ এতে প্রভাব দেখা যাচ্ছে না।

ফোকাস করার সময়, বোতাম থেকে ফোকাস আউটলাইন অফসেট বাড়ান, এটিকে একটি সুন্দর ফোকাস চেহারা দেয় যা বোতামের ভেতর থেকে বৃদ্ধি পায় বলে মনে হয়:

:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

আইকন

আইকন পরিচালনার জন্য, নির্বাচকটিতে সরাসরি SVG শিশু বা কাস্টম অ্যাট্রিবিউট data-icon সহ উপাদানগুলির জন্য একটি যোগ করা হয়েছে :where() নির্বাচক। ইনলাইন এবং ব্লক লজিক্যাল বৈশিষ্ট্য ব্যবহার করে কাস্টম বৈশিষ্ট্যের সাথে আইকনের আকার সেট করা হয়েছে। স্ট্রোকের রঙ সেট করা হয়েছে, পাশাপাশি text-shadow সাথে মেলে একটি drop-shadow সেট করা হয়েছে। flex-shrink 0 তে সেট করা হয়েছে যাতে আইকনটি কখনও স্কুইশ না হয়। অবশেষে, আমি লাইনযুক্ত আইকনগুলি নির্বাচন করি এবং এখানে fill: none এবং round লাইন ক্যাপ এবং লাইন জয়েন সহ সেই স্টাইলগুলি বরাদ্দ করি:

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) > :where(svg, [data-icon]) {
  block-size: var(--_icon-size);
  inline-size: var(--_icon-size);
  stroke: var(--_icon-color);
  filter: drop-shadow(var(--_ink-shadow));

  flex-shrink: 0;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

জমা দেওয়ার বোতামগুলি কাস্টমাইজ করা হচ্ছে

আমি সাবমিট বোতামগুলিকে কিছুটা প্রচারিত চেহারা দিতে চেয়েছিলাম, এবং আমি বোতামগুলির টেক্সট রঙকে অ্যাকসেন্ট রঙ করে এটি অর্জন করেছি:

:where(
  [type="submit"], 
  form button:not([type],[disabled])
) {
  --_text: var(--_accent);
}

রিসেট বোতামগুলি কাস্টমাইজ করুন

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

:where([type="reset"]) {
  --_border-light: hsl(0 100% 83%);
  --_highlight-light: hsl(0 100% 89% / 20%);
  --_text-light: hsl(0 80% 50%);
  --_text-dark: hsl(0 100% 89%);
}

আমি আরও ভেবেছিলাম ফোকাস আউটলাইনের রঙটি লাল রঙের উচ্চারণের সাথে মিলে গেলে ভালো হবে। টেক্সটের রঙটি গাঢ় লালকে হালকা লালের সাথে মানিয়ে নেয়। আমি আউটলাইনের রঙটিকে currentColor কীওয়ার্ডের সাথে মিলিয়ে দেব:

:where([type="reset"]):focus-visible {
  outline-color: currentColor;
}

অক্ষম বোতামগুলি কাস্টমাইজ করুন

নিষ্ক্রিয় বোতামগুলিকে দমন করার চেষ্টা করার সময় নিষ্ক্রিয় বোতামগুলির রঙের বৈসাদৃশ্য কম থাকা খুবই সাধারণ ব্যাপার, যার ফলে এটি কম সক্রিয় দেখায়। আমি প্রতিটি রঙের সেট পরীক্ষা করে নিশ্চিত করেছি যে সেগুলি পাস করেছে, DevTools বা VisBug-এ স্কোর পাস না হওয়া পর্যন্ত HSL হালকাতার মান ধরে রেখেছি।

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
)[disabled] {
  --_bg: none;
  --_text-light: hsl(210 7% 40%);
  --_text-dark: hsl(210 11% 71%);

  cursor: not-allowed;
  box-shadow: var(--_shadow-1);
}

ফাইল ইনপুট বোতাম কাস্টমাইজ করা

ফাইল ইনপুট বোতামটি একটি স্প্যান এবং একটি বোতামের জন্য একটি ধারক। CSS ইনপুট ধারকটিকে কিছুটা স্টাইল করতে সক্ষম, পাশাপাশি নেস্টেড বোতামটিও, কিন্তু স্প্যানটি নয়। ধারকটিকে max-inline-size দেওয়া হয়েছে যাতে এটি প্রয়োজনের চেয়ে বড় না হয়, অন্যদিকে inline-size: 100% এটিকে সঙ্কুচিত করতে এবং তার চেয়ে ছোট পাত্রে ফিট করতে দেয়। পটভূমির রঙটি একটি অভিযোজিত রঙে সেট করা হয়েছে যা অন্যান্য পৃষ্ঠের তুলনায় গাঢ়, তাই এটি ফাইল নির্বাচক বোতামের পিছনে দেখায়।

:where(input[type="file"]) {
  inline-size: 100%;
  max-inline-size: max-content;
  background-color: var(--_input-well);
}

ফাইল নির্বাচক বোতাম এবং ইনপুট টাইপ বোতামগুলিকে বিশেষভাবে appearance: none ।

:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
  appearance: none;
}

সবশেষে, বোতামের inline-end মার্জিন যোগ করা হয় যাতে স্প্যান টেক্সটটি বোতাম থেকে দূরে সরে যায়, যার ফলে কিছু জায়গা তৈরি হয়।

:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--_padding-inline);
}

বিশেষ অন্ধকার থিমের ব্যতিক্রম

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

@media (prefers-color-scheme: dark) {
  :where(
    [type="submit"],
    [type="reset"],
    [disabled],
    form button:not([type="button"])
  ) {
    --_bg: var(--_input-well);
  }
}

রূপ তৈরি করা

মজা করার জন্য, এবং এটি ব্যবহারিক হওয়ায়, আমি কয়েকটি ভেরিয়েন্ট কীভাবে তৈরি করতে হয় তা দেখানোর সিদ্ধান্ত নিয়েছি। একটি ভেরিয়েন্ট খুবই প্রাণবন্ত, প্রাইমারি বোতামগুলি প্রায়শই দেখতে কেমন লাগে তার মতো। আরেকটি ভেরিয়েন্ট বড়। শেষ ভেরিয়েন্টটিতে একটি গ্রেডিয়েন্ট-পূর্ণ আইকন রয়েছে।

প্রাণবন্ত বোতাম

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

.btn-custom {
  --_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));
  --_border: hsl(228 89% 63%);
  --_text: hsl(228 89% 100%);
  --_ink-shadow: 0 1px 0 hsl(228 57% 50%);
  --_highlight: hsl(228 94% 67% / 20%);
}

দ্রষ্টব্য: যদি আমি একটি অভিযোজিত প্রাথমিক অ্যাকশন বোতাম তৈরি করতে চাই, তাহলে আমি --_bg-light এবং --_bg-dark এর পরিবর্তে --_bg এর পরিবর্তে ওভাররাইট করব। এই ভেরিয়েবলগুলিকে ওভাররাইট করলে বেস প্রোপার্টি নতুন সংজ্ঞায়িত light এবং dark প্রপসের মধ্যে অদলবদল করতে পারবে।

বড় বোতাম

--_size কাস্টম প্রপার্টি পরিবর্তন করে এই ধরণের বোতাম তৈরি করা সম্ভব। প্যাডিং এবং অন্যান্য স্পেস এলিমেন্ট এই আকারের সাথে সম্পর্কিত, নতুন আকারের সাথে আনুপাতিকভাবে স্কেল করা হচ্ছে।

.btn-large {
  --_size: 1.5rem;
}

আইকন বোতাম

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

[data-icon="cloud"] {
  --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;

  -webkit-mask: var(--icon-cloud);
  mask: var(--icon-cloud);
  background: linear-gradient(to bottom, var(--_accent-dark), var(--_accent-light));
}

উপসংহার

এখন তুমি জানো আমি এটা কিভাবে করেছি, তুমি কিভাবে করবে‽ 🙂

আসুন আমরা আমাদের পদ্ধতিগুলিকে বৈচিত্র্যময় করি এবং ওয়েবে নির্মাণের সমস্ত উপায় শিখি।

একটি ডেমো তৈরি করুন, আমাকে লিঙ্কগুলি টুইট করুন , এবং আমি এটি নীচের কমিউনিটি রিমিক্স বিভাগে যুক্ত করব!

কমিউনিটি রিমিক্স

এখানে এখনও দেখার মতো কিছু নেই।

রিসোর্স

গিথুবে সোর্স কোড