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

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

Adam Argyle

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

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

खास जानकारी

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

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

स्टाइल के लिए सीएसएस का इस्तेमाल करने के लिए, बटन में pseudo क्लास भी होती हैं. इन क्लास में सीएसएस हुक की सुविधा मिलती है, ताकि आप बटन के लुक को अपनी पसंद के मुताबिक बना सकें: :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>

स्टाइल

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

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

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

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

लेआउट

मैंने बटन के लिए एक flexbox लेआउट दिया है, खास तौर पर एक 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;
}

आइकॉन

आइकॉन को हैंडल करने के लिए, सिलेक्टर में एक :where() सिलेक्टर जोड़ा गया है. यह सिलेक्टर, सीधे बच्चों के SVG या कस्टम एट्रिब्यूट data-icon वाले एलिमेंट के लिए है. आइकॉन का साइज़, कस्टम प्रॉपर्टी के साथ सेट किया जाता है. इसके लिए, इनलाइन और ब्लॉक लॉजिकल प्रॉपर्टी का इस्तेमाल किया जाता है. स्ट्रोक का रंग और 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;
}

आइकॉन बटन

इस आइकॉन इफ़ेक्ट का हमारी बटन स्टाइल से कोई लेना-देना नहीं है. हालांकि, यह दिखाता है कि सिर्फ़ कुछ सीएसएस प्रॉपर्टी की मदद से इसे कैसे हासिल किया जा सकता है. साथ ही, यह दिखाता है कि बटन उन आइकॉन को कितनी अच्छी तरह से हैंडल करता है जो इनलाइन 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));
}

नतीजा

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

चलिए, इसे अलग-अलग तरीके से समझें और वेब पर सभी के काम करने के तरीके सीखें.

एक डेमो तैयार करें, मुझे ट्वीट करें वाले लिंक, और मैं उसे नीचे दिए गए कम्यूनिटी रीमिक्स सेक्शन में जोड़ दूंगी!

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

फ़िलहाल, यहां कुछ भी नहीं है.

रिसॉर्स

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