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

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

Adam Argyle

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

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

खास जानकारी

<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, माउस या कीबोर्ड दबाने पर :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 से ज़्यादा कॉम्बिनेशन होते हैं. यह अच्छी बात है कि सीएसएस की मदद से, हम इनमें से हर एक को साफ़ तौर पर बता सकते हैं!

सुलभता

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

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

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

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>

स्टाइल

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

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

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

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

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

बटन के टेक्स्ट के रंग सफ़ेद या काले नहीं होते. ये 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);

सिलेक्टर में सभी प्रॉपर्टी एक साथ

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

इससे न सिर्फ़ पढ़ने में मदद मिलती है, बल्कि इन कस्टम बटन का इस्तेमाल करने वाले लोग, इस बात को लेकर भरोसे के साथ बेयर प्रॉप्स का इस्तेमाल कर सकते हैं कि वे उपयोगकर्ता की प्राथमिकताओं के हिसाब से सही ढंग से काम करेंगे.

कम मोशन वाले अडैप्टेशन

अगर वेबसाइट पर आने वाले इस उपयोगकर्ता के लिए मोशन ठीक है, तो var(--_transition-motion-ok) को --_transition असाइन करें:

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

रंग और बॉर्डर

इसके बाद, मैंने पहले से तय की गई कुछ अडैप्टिव कस्टम प्रॉपर्टी का इस्तेमाल करके, फ़ॉन्ट साइज़, बैकग्राउंड, टेक्स्ट, और बॉर्डर के रंग को पसंद के मुताबिक बनाया:

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

फ़ोकस होने पर, बटन से फ़ोकस आउटलाइन का ऑफ़सेट बढ़ाएं. साथ ही, उसे ऐसा फ़ोकस दें जो बटन के अंदर से बढ़ता हुआ दिखे:

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

बड़ा बटन

इस तरह का बटन, --_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 पर सोर्स कोड