बटन कॉम्पोनेंट बनाना

रंग के हिसाब से अडैप्ट होने वाले, रिस्पॉन्सिव, और ऐक्सेस किए जा सकने वाले <button> कॉम्पोनेंट बनाने का बुनियादी तरीका.

Adam Argyle

इस पोस्ट में, मैं रंग के हिसाब से बदलने वाले, रिस्पॉन्सिव, और ऐक्सेस किए जा सकने वाले <button> एलिमेंट बनाने का तरीका शेयर करना चाहता/चाहती हूं. डेमो आज़माएं और सोर्स देखें

हल्के और गहरे रंग वाली थीम में, बटन पर कीबोर्ड और माउस से इंटरैक्ट किया जाता है.

अगर आपको वीडियो देखना पसंद है, तो यहां इस पोस्ट का YouTube वर्शन दिया गया है:

खास जानकारी

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 1
• 12
• 1
• 1

सोर्स

<button> एलिमेंट, उपयोगकर्ता के इंटरैक्शन के लिए बनाया गया है. इसका click इवेंट, कीबोर्ड, माउस, टच, वॉइस वगैरह से ट्रिगर होता है. साथ ही, इसकी समयावधि के बारे में स्मार्ट नियम भी होते हैं. यह हर ब्राउज़र में कुछ डिफ़ॉल्ट स्टाइल के साथ भी आता है, ताकि आप उन्हें सीधे इस्तेमाल कर सकें. ब्राउज़र के लाइट और डार्क बटन के लिए भी ऑप्ट इन करने के लिए, color-scheme का इस्तेमाल करें.

इसमें अलग-अलग तरह के बटन भी होते हैं. इनमें से हर बटन, ऊपर दिए गए Codepen एम्बेड में दिखाया गया है. बिना टाइप वाला <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">

इस महीने के जीयूआई चैलेंज में, हर बटन को स्टाइल मिलेगा, ताकि उनके काम को विज़ुअल तौर पर अलग-अलग दिखाया जा सके. रीसेट करने वाले बटन के लिए चेतावनी वाले रंग इस्तेमाल किए जाएंगे, क्योंकि ये नुकसान पहुंचा सकते हैं. साथ ही, सबमिट करने वाले बटन के लिए नीले रंग का एक्सेंट टेक्स्ट इस्तेमाल किया जाएगा, ताकि वे सामान्य बटन के मुकाबले थोड़े ज़्यादा प्रमोट किए जा सकें.

सभी तरह के बटन के फ़ाइनल सेट की झलक, जो फ़ॉर्म में नहीं, बल्कि फ़ॉर्म के बिना दिखाई गई है. इसमें आइकॉन बटन और पसंद के मुताबिक बटन के लिए बेहतर सुविधाएं जोड़ी गई हैं

ध्यान दें: बटन हमेशा अपने अलग तरीके से काम करते हैं. इसलिए, उन्हें उनके काम करने के तरीके के हिसाब से स्टाइल क्यों न दिया जाए?

बटन में सूडो क्लास भी होती हैं, ताकि सीएसएस उन्हें स्टाइल दे सके. ये क्लास, बटन के दिखने के तरीके को पसंद के मुताबिक बनाने के लिए, सीएसएस हुक उपलब्ध कराती हैं: :hover, जब माउस बटन पर हो, :active, जब माउस या कीबोर्ड को दबाया जा रहा हो, और :focus या :focus-visible, सहायक टेक्नोलॉजी की स्टाइल में मदद करने के लिए.

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

गहरे रंग वाली थीम में, सभी तरह के बटन के फ़ाइनल सेट की झलक

मार्कअप

एचटीएमएल स्पेसिफ़िकेशन में दिए गए बटन टाइप के अलावा, मैंने आइकॉन वाला बटन और कस्टम क्लास 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>

इस समय, कॉम्बिनेशन की मैट्रिक काफ़ी बड़ी है. बटन के टाइप, स्यूडो-क्लास, और फ़ॉर्म में या उससे बाहर होने के बीच, बटन के 20 से ज़्यादा कॉम्बिनेशन होते हैं. यह अच्छी बात है कि सीएसएस की मदद से, हम इनमें से हर एक को साफ़ तौर पर बता सकते हैं!

सुलभता

बटन एलिमेंट, आम तौर पर ऐक्सेस किए जा सकते हैं. हालांकि, इनमें कुछ सामान्य बेहतरियां की जा सकती हैं.

एक साथ कर्सर घुमाना और फ़ोकस करना

मुझे :is() फ़ंक्शनल स्यूडो सिलेक्टर की मदद से, :hover और :focus को एक साथ ग्रुप करना है. इससे यह पक्का करने में मदद मिलती है कि मेरे इंटरफ़ेस में हमेशा कीबोर्ड और सहायक टेक्नोलॉजी के स्टाइल का ध्यान रखा जाए.

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

डेमो आज़माएं!

इंटरैक्टिव फ़ोकस रिंग

मुझे कीबोर्ड और सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों के लिए, फ़ोकस रिंग को ऐनिमेट करना पसंद है. मैंने ऐसा करने के लिए, बटन से आउटलाइन को 5 पिक्सल दूर कर दिया है. हालांकि, ऐसा सिर्फ़ तब किया जाता है, जब बटन चालू न हो. इससे एक ऐसा इफ़ेक्ट बनता है कि बटन को दबाने पर फ़ोकस रिंग, बटन के साइज़ पर वापस आ जाती है.

: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 एट्रिब्यूट की वैल्यू 'सही है' पर सेट है

स्टाइल

अगले सेक्शन में, मैंने बटन की अडैप्टिव स्टाइल को मैनेज करने के लिए, सबसे पहले एक कस्टम प्रॉपर्टी सिस्टम बनाया है. इन कस्टम प्रॉपर्टी की मदद से, एलिमेंट चुने जा सकते हैं और उनकी थीम को पसंद के मुताबिक बनाया जा सकता है.

अडैप्टिव कस्टम प्रॉपर्टी की रणनीति

इस जीयूआई चैलेंज में इस्तेमाल की गई कस्टम प्रॉपर्टी की रणनीति, रंगों की स्कीम बनाने में इस्तेमाल की गई रणनीति से काफ़ी मिलती-जुलती है. आस-पास की लाइट के हिसाब से स्क्रीन की रोशनी और गहरे रंग वाले रंग सिस्टम के लिए, हर थीम के लिए एक कस्टम प्रॉपर्टी तय की जाती है और उसे उसी हिसाब से नाम दिया जाता है. इसके बाद, थीम की मौजूदा वैल्यू को सेव करने के लिए, एक कस्टम प्रॉपर्टी का इस्तेमाल किया जाता है. साथ ही, इसे किसी सीएसएस प्रॉपर्टी को असाइन किया जाता है. बाद में, बटन की स्टाइल को अपडेट करने के बाद, एक कस्टम प्रॉपर्टी को किसी दूसरी वैल्यू पर अपडेट किया जा सकता है.

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

ध्यान दें: अंडरस्कोर का यह तरीका, Lea Verou ने डिफ़ॉल्ट वैल्यू वाली कस्टम प्रॉपर्टी वाली इस पोस्ट में बताया है.

मुझे यह पसंद है कि हल्के और गहरे रंग वाली थीम साफ़ तौर पर दिखती हैं. इनडायरेक्टिव और एब्स्ट्रैक्शन को --_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);

बटन टेक्स्ट का रंग

बटन के टेक्स्ट के रंग सफ़ेद या काले नहीं होते. ये hsl() का इस्तेमाल करके, --_accent के गहरे या हल्के रंग होते हैं. साथ ही, ये रंग 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);
}

बटन की स्टाइल तय करना

सिलेक्टर में बदलाव करना

चुनने वाला टूल input[type="file"], इनपुट का बटन हिस्सा नहीं है, बल्कि ::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;
}

ध्यान दें: अगर एचटीएमएल दस्तावेज़ में <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 को 'कोई नहीं' पर सेट करके इसे बंद कर दिया है. हाइलाइट करने के लिए रंगों पर टैप करने की सुविधा (-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;
}

आइकॉन

आइकॉन को हैंडल करने के लिए, सिलेक्टर में डायरेक्ट एसवीजी चाइल्ड या कस्टम एट्रिब्यूट 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 में स्कोर पास नहीं हो गया.

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

फ़ाइल इनपुट बटनों को पसंद के मुताबिक बनाना

फ़ाइल इनपुट बटन, स्पैन और बटन के लिए एक कंटेनर है. सीएसएस, इनपुट कंटेनर और नेस्ट किए गए बटन को थोड़ा स्टाइल दे सकती है, लेकिन स्पैन को नहीं. कंटेनर को 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 के बजाय --_bg-light और --_bg-dark को ओवरराइट करूंगा. इन वैरिएबल को ओवरराइट करने से, बेस प्रॉपर्टी को तय किए गए नए लाइट और डार्क प्रॉप के बीच स्विच करने की अनुमति मिलती है.

बड़ा बटन

बटन का यह स्टाइल, --_size कस्टम प्रॉपर्टी में बदलाव करके हासिल किया जाता है. पैडिंग और अन्य स्पेस एलिमेंट, इस साइज़ के हिसाब से होते हैं. ये नए साइज़ के हिसाब से स्केल होते हैं.

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

आइकॉन बटन

इस आइकॉन इफ़ेक्ट का हमारे बटन स्टाइल से कोई लेना-देना नहीं है. हालांकि, इससे यह पता चलता है कि कुछ सीएसएस प्रॉपर्टी की मदद से, यह इफ़ेक्ट कैसे पाया जा सकता है. साथ ही, यह भी पता चलता है कि बटन, इनलाइन एसवीजी के अलावा दूसरे आइकॉन को कितनी अच्छी तरह हैंडल करता है.

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

नतीजा

अब आपको पता है कि मैंने यह कैसे किया, तो आप कैसे करेंगे‽ 🙂

आइए, अलग-अलग तरीकों का इस्तेमाल करके, वेब पर कॉन्टेंट बनाने के सभी तरीके जानें.

डेमो बनाएं और मुझे ट्वीट करें लिंक भेजें. हम इसे कम्यूनिटी रीमिक्स सेक्शन में जोड़ देंगे!

कम्यूनिटी रीमिक्स

फ़िलहाल, यहां देखने के लिए कुछ नहीं है.

संसाधन

• GitHub पर सोर्स कोड