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

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

Adam Argyle

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

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

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

खास जानकारी

Browser Support

• 1
• 12
• 1
• 1

Source

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

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

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

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

बटन में स्टाइलिंग के लिए सीएसएस का इस्तेमाल करने के लिए, सूडो क्लास भी होती हैं. ये क्लास, बटन के लुक को पसंद के मुताबिक बनाने के लिए सीएसएस हुक उपलब्ध कराती हैं: :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">

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

<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 को true पर सेट किया गया है

स्टाइल

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

अनुकूलित की जा सकने वाली कस्टम प्रॉपर्टी की रणनीति

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

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 ने इस पोस्ट में बताया है: Custom properties with defaults.

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

--_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 वैरिएबल को 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;
}

आइकॉन

आइकॉन को हैंडल करने के लिए, सिलेक्टर में :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%);
}

ध्यान दें: अगर मुझे अडैप्टिव प्राइमरी ऐक्शन बटन बनाना होता, तो मैं --_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 पर सोर्स कोड