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

रंगों के हिसाब से सही, रिस्पॉन्सिव, और ऐक्सेस किए जा सकने वाले <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">

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

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

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

मार्कअप

HTML स्पेसिफ़िकेशन के ज़रिए दिए गए बटन टाइप के अलावा, मैंने आइकॉन और कस्टम क्लास btn-custom वाला बटन.

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

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

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

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

सुलभता

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

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

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

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

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

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

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

पासिंग कलर कंट्रास्ट पक्का करना

हल्के और गहरे रंग, दोनों में कम से कम चार अलग-अलग रंगों के कॉम्बिनेशन मौजूद हैं. कलर कंट्रास्ट पर ध्यान देने की ज़रूरत है: बटन, 'सबमिट करें' बटन, 'रीसेट करें' बटन, और बंद किया गया बटन. VisBug का इस्तेमाल यहां करने के लिए किया जाता है सभी स्कोर की एक साथ जांच करें और दिखाएं:

उन लोगों के आइकॉन छिपाए जा रहे हैं जो देख नहीं सकते

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

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

स्टाइल

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

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

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

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

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

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

मुझे यह पसंद है कि हल्के और गहरे रंग वाली थीम, डिक्लेरेटिव और साफ़ तौर पर जानकारी देती हैं. कॉन्टेंट बनाने इनडायरेक्ट और ऐब्स्ट्रैक्ट को --_bg कस्टम प्रॉपर्टी में लोड किया जाता है, जो अब एकमात्र "प्रतिक्रिया" है प्रॉपर्टी; --_bg-light और --_bg-dark स्टैटिक. यह भी पता है कि हल्के रंग वाली थीम डिफ़ॉल्ट थीम है और गहरे रंग का इस्तेमाल सिर्फ़ शर्त के साथ किया जाता है.

एक जैसा डिज़ाइन तैयार करने की तैयारी

शेयर किया गया सिलेक्टर

नीचे दिए गए सिलेक्टर का इस्तेमाल सभी तरह के बटन को टारगेट करने के लिए किया जाता है और यह पहले थोड़ा पेचीदा. :where() है इसलिए, बटन को कस्टमाइज़ करने के लिए किसी खास ख़ारिज की ज़रूरत नहीं है. बटन अक्सर वैकल्पिक स्थितियों के लिए ऑप्टिमाइज़ किया जाता है और :where() सिलेक्टर यह पक्का करता है कि टास्क आसान है. :where() में, हर बटन टाइप को चुना गया है. इसमें, ::file-selector-button, जो नहीं हो सकती इस्तेमाल किया गया :is() या :where() में.

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

सभी कस्टम प्रॉपर्टी, इस सिलेक्टर के दायरे में होंगी. समीक्षा करने का समय सभी कस्टम प्रॉपर्टी का डेटा इकट्ठा करने की सुविधा मिलती है! इसमें कुछ कस्टम प्रॉपर्टी का इस्तेमाल किया गया है बटन. जैसे-जैसे हम आगे बढ़ेंगे वैसे-वैसे हर ग्रुप के बारे में बात करूंगा. इसके बाद, कम रोशनी वाली चीज़ों को मोशन से जुड़े कॉन्टेक्स्ट को सेक्शन के आखिर में देखें.

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

रंग दिखाने के लिए सबमिट बटन और आइकॉन सबसे सही जगह हैं:

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

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

बटन के टेक्स्ट का रंग सफ़ेद या काले नहीं होता है. वह गहरे या हल्के रंग वाले होते हैं का --_accent इस्तेमाल कर रहा है hsl() और रंग से सटाकर रखना 210:

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

बटन पृष्ठभूमि रंग

हल्के रंग वाली थीम को छोड़कर, बटन के बैकग्राउंड उसी hsl() पैटर्न के हिसाब से होते हैं बटन—इन्हें सफ़ेद पर सेट किया जाता है, इसलिए उनकी सतह उन्हें या अन्य प्लैटफ़ॉर्म के सामने रखें:

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

बटन का बैकग्राउंड वेल

बैकग्राउंड का यह रंग, किसी सरफ़ेस को अन्य सरफ़ेस के पीछे दिखाने के लिए है, फ़ाइल इनपुट के बैकग्राउंड के लिए उपयोगी है:

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

बटन पैडिंग

बटन में टेक्स्ट के आस-पास स्पेसिंग ch यूनिट, फ़ॉन्ट साइज़ से मिलती-जुलती लंबाई. बड़ा होने पर यह ज़रूरी हो जाता है बटन से बस font-size और बटन स्केल को बढ़ाया जा सकता है अनुपात के हिसाब से:

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

बटन बॉर्डर

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

--_border-radius: .5ch;

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

बटन पर कर्सर घुमाकर हाइलाइट करने वाला इफ़ेक्ट

ये प्रॉपर्टी, इंटरैक्शन पर ट्रांज़िशन के लिए साइज़ प्रॉपर्टी तय करती हैं और हाइलाइट करने के लिए कलर, एडेप्टिव कलर सिस्टम के हिसाब से बनाया गया है. हम बताएंगे कि इस पोस्ट में बाद में इंटरैक्ट करते हैं, लेकिन आखिर में इनका इस्तेमाल box-shadow के लिए किया जाता है इफ़ेक्ट:

--_highlight-size: 0;

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

बटन के टेक्स्ट की परछाई

प्रत्येक बटन में सूक्ष्म लेख शैडो शैली होती है. इससे टेक्स्ट को सबसे ऊपर रखने में मदद मिलती है बटन पर क्लिक करके, कॉन्टेंट को आसानी से पढ़ा जा सकता है और उसकी स्टाइल को बेहतर बनाया जा सकता है.

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

बटन का आइकॉन

आइकॉन की लंबाई ch यूनिट की वजह से होती है. इसमें आइकॉन दो वर्णों के साइज़ के होते हैं जो बटन के टेक्स्ट के अनुपात में आइकॉन के स्केल को बढ़ाने में मदद करेगी. कॉन्टेंट बनाने अडैप्टिव और मिलते-जुलते थीम वाले आइकॉन का रंग --_accent-color पर ले जाता है रंग.

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

बटन छाया

परछाई रोशनी और अंधेरे के हिसाब से अच्छी तरह से काम कर सके, इसके लिए उन्हें दोनों को बदलना होगा रंग और अपारदर्शिता. हल्के रंग की थीम वाले शैडो सबसे बेहतर तब होते हैं, जब वे गहरे रंग वाले हों जिसे वे ओवरले कर रहे हैं. गहरे रंग वाली थीम के गहरे हिस्सों को हल्का करना चाहिए ज़्यादा संतृप्त कर सकते हैं, ताकि वे गहरे रंग की सतह के रंगों को ओवरले कर सकें.

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

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

ज़रूरत के हिसाब से रंग और ताकत की मदद से, गहरे हिस्सों को हल्का किया जा सकता है:

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

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

इसके अलावा, बटन को थोड़ा 3D दिखाने के लिए, 1px बॉक्स शैडो का इस्तेमाल किया गया है भ्रम पैदा करता है:

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

बटन के ट्रांज़िशन

अडैप्टिव कलर के पैटर्न के हिसाब से, मैं दो स्टैटिक प्रॉपर्टी बनाता हूं, डिज़ाइन सिस्टम के विकल्प होल्ड पर रखें:

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

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

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

रंग और बॉर्डर

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

: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 लेआउट, जो अपने कॉन्टेंट के हिसाब से फ़िट हो जाएगा. I फिर बीच में साथ ही, टेक्स्ट को बच्चों को वर्टिकल और हॉरिज़ॉन्टल तौर पर अलाइन करें. center. इससे आइकॉन और दूसरी चीज़ों को मदद मिलेगी बटन तत्वों को ठीक से अलाइन करने के लिए.

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

टच और माउस का UX

अगला सेक्शन ज़्यादातर, मोबाइल डिवाइसों के टच उपयोगकर्ताओं के लिए है. पहला प्रॉपर्टी, 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;
}

फ़ोकस करने पर, बटन से फ़ोकस आउटलाइन ऑफ़सेट बढ़ाएं, इसे इसका फ़ोकस, बटन पर क्लिक करते ही बढ़ता है:

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

आइकॉन

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