🛎️ 🙍🏼 🍌 पुराने पुराने बटन तत्व को स्टाइल करना 🤟🏼 🧑🏼 👩🏾‍🤝‍👨🏼

एक बटन उन तत्वों में से एक है जो अक्सर वेब पेजों पर उपयोग किए जाते हैं। टैग <button></button>का उपयोग डेटा आउटपुट जैसी प्रक्रिया शुरू करने के लिए किया जा सकता है, मोडल विंडो खोलना, फॉर्म सबमिट करना, इत्यादि। सामग्री में, जिसका अनुवाद हम प्रकाशित करते हैं, हम तत्व को स्टाइल करने buttonऔर बटन को डिज़ाइन करने के तरीके के बारे में बात करेंगे ताकि वे किसी भी ब्राउज़र में अच्छी तरह से काम करें। इसके अलावा, सबसे अधिक इस्तेमाल की जाने वाली बटन शैलियों को यहां कवर किया जाएगा। हम यहां कुछ कठिनाइयों के बारे में बात करेंगे जो बटन के साथ काम करते समय उत्पन्न होती हैं।

डिफ़ॉल्ट बटन पर शैलियाँ लागू की गईं

शायद "मानक शैलियों" के बारे में बात करना किसी को कुछ प्राथमिक चीजों की चर्चा लगती है, लेकिन, वास्तव में, इसके बारे में बात करना काफी दिलचस्प है। यहां Google Chrome उपयोगकर्ता एजेंट से बटन के लिए मानक स्टाइलशीट है।

.c-button {
    -webkit-writing-mode: horizontal-tb !important;
    -webkit-appearance: button;
    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
    border-style: solid;
    border-width: 1px;
    padding: 1px 7px 2px;
    text-rendering: auto;
    color: initial;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 11px system-ui;
}

और यहां वह है जो एक मानक बटन जैसा दिखता है जब इसका आउटपुट डिफ़ॉल्ट शैलियों को नहीं बदलता है।

एक साधारण बटन जिस पर मानक शैलियों को लागू किया जाता है।

सबसे पहले, संपत्ति को फिर से परिभाषित करेंappearance। यह एक विशेष मंच के लिए विशिष्ट स्टाइल के लिए प्रयोग किया जाता है। इस दृष्टिकोण के साथ बटन की उपस्थिति उपयोगकर्ता के ऑपरेटिंग सिस्टम में उपयोग की जाने वाली शैलियों पर आधारित है।

.c-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

अब, संपत्ति को रीसेट करने के बाद appearance, विभिन्न ब्राउज़रों में बटन कैसे दिखते हैं , इस पर ध्यान दें।

इन बटनों की उपस्थिति संपत्ति किसी के लिए भी सेट नहीं है।

अगला, स्टाइल में आगे बढ़ने से पहले, हमें कुछ और गुणों को रीसेट करने की आवश्यकता है। यह -border,border-radius,background।

.c-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  background: #ccc;
}

गुणों को रीसेट करने के बाद बटन

करें अब जब हमने मानक बटन शैलियों को रीसेट कर दिया है, तो यह आगे बढ़ने का समय है। अर्थात्, मैं बात करना चाहता हूं कि उनके डिजाइन की आवश्यकताओं के आधार पर बटन कैसे स्टाइल करें।

स्टाइलिंग नियमित बटन

आइए एक मूल उदाहरण से शुरू करते हैं, केवल पाठ प्रदर्शित करने वाले नियमित बटन स्टाइल के बारे में बात कर रहे हैं। निम्नलिखित आंकड़ा एक नियमित बटन के "शरीर रचना" को दर्शाता है।

पाठ रंग (टेक्स्ट रंग), फ़ॉन्ट आकार (फ़ॉन्ट आकार), पृष्ठभूमि (पृष्ठभूमि), गोल कोनों (गोलाई), इंडेंट (पैडल)

.c-button {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4676D7;
  color: #fff;
  padding: 8px 16px;
  font-size: 16px;
}

उपरोक्त सीएसएस कोड होने से, हम पिछले आंकड़े में दिखाए गए बटन के समान बटन प्राप्त कर सकते हैं। बटन की मूल शैली सेट होने के बाद, आपको विभिन्न राज्यों में बटन की उपस्थिति का ध्यान रखना होगा।

बटन की सामान्य स्थिति (सामान्य), फोकस हो रही है (फोकस), बटन पर माउस को मँडराते हुए (होवर), बटन को अक्षम करना (अक्षम)

ThemStyles बटन पर लागू जब आप उन पर माउस और जब वे ध्यान केंद्रित मिलता है

उपयोगकर्ता को इंगित करने के लिए कि माउस पॉइंटर बटन के ऊपर है, इस घटना के लिए डिज़ाइन की गई शैली के साथ बटन को लैस करना महत्वपूर्ण है। यह एक बटन की उपस्थिति को बदलने के लिए लागू होता है जब यह उस स्थिति में फ़ोकस प्राप्त करता है जहां कीबोर्ड का उपयोग करने वाला उपयोगकर्ता पृष्ठ के साथ काम करता है।

यह सामग्री इंगित करती है कि बटन पर लागू शैलियों को जोड़ना महत्वपूर्ण है जब आप उस पर मंडराते हैं ( hover) और जब वह फोकस प्राप्त करता है ( focus)।

जब एक शैली को शैली से hoverपहले जोड़ा जाता है focus, तो सभी शैलियाँ सही ढंग से काम करती हैं। समस्या तब दिखाई देती है जब शैली को शैली से focusपहले जोड़ा जाता है hover। जब किसी तत्व को माउस से क्लिक किया जाता है, तो शैली focusकिसी भी तरह से प्रकट नहीं होती है, केवल शैली द्वारा निर्धारित बटन प्रतिनिधित्व दिखाई देता है hover।

ठीक है, अगर पहले हॉवर शैली आती है, और फिर फ़ोकस शैली।

यहाँ सही शैली विवरण कैसा दिखता है:

.c-button:hover {
  background: #1d49aa;
}

.c-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}

Th न्यूनतम बटन चौड़ाई

बटन अच्छा दिखने के लिए, इसमें एक निश्चित चौड़ाई होनी चाहिए। अग्रिम में इस बारे में सोचना और बटन पर दिखाई देने वाले लंबे और छोटे लेबल को ध्यान में रखना महत्वपूर्ण है। संपत्ति के कारण, min-widthआप बटन की न्यूनतम चौड़ाई निर्धारित कर सकते हैं। यहां मेरा लेख है जहां इस और इसी तरह के अन्य गुणों पर विस्तार से चर्चा की गई है।

निम्नलिखित आकृति पर एक नज़र डालें। वहां आप कई बटन देख सकते हैं जिनमें अंग्रेजी और अरबी में अलग-अलग लंबाई के लेबल हैं। यदि आप बटन की न्यूनतम चौड़ाई निर्धारित नहीं करते हैं, तो बटन, जब उस पर शिलालेख छोटा होता है, बहुत छोटा होगा। यह अनुमति नहीं है और संपत्ति का उपयोग करना बेहतर है min-width।

यह न्यूनतम-चौड़ाई बटन संपत्ति सेट करने के लायक है

.c-button {
    min-width: 100px;
    /*  */
}

▍ इंडेंट

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

निम्नलिखित आकृति पर एक नज़र डालें।

यह आंतरिक इंडेंट को बटन पर असाइन करने की सिफारिश की जाती है।

ध्यान दें कि यदि इंडेंटेशन को बटन को नहीं सौंपा गया है, तो उस पर स्थित शिलालेख किनारों के बहुत करीब आ सकता है। भले ही बटन में संपत्ति होmin-width। तस्वीर के निचले भाग में, संपत्तिpaddingऔरसंपत्ति दोनों काउपयोग किया जाता हैmin-width। यह अधिक आत्मविश्वास देता है कि बटन ऐसी स्थिति में अच्छा लगेगा जहां उस पर प्रदर्शित शिलालेख की लंबाई पहले से ज्ञात नहीं है।

.Font परिवार बटन पर स्थित शिलालेख के लिए इस्तेमाल किया

फार्म तत्वों डिफ़ॉल्ट रूप से, करने के लिए सौंपा फ़ॉन्ट परिवार के वारिस नहीं है <html>या <body>। यह ध्यान रखना दिलचस्प है कि मैंने इस लेख का 70% लिखा और महसूस किया कि, सबसे पहले, मैंने प्रदर्शन उद्देश्यों के लिए उपयोग किए जाने वाले बटन के फ़ॉन्ट को नहीं बदला, और दूसरी बात, मैंने इसके बारे में कुछ नहीं लिखा।

इस समस्या को हल करने के लिए, संपत्ति font-familyको सेट करना होगा inherit।

.c-button {
    font-family: inherit;
    /*   */
}

▍ स्टाइलिंग अक्षम बटन

उपयोगकर्ता को यह इंगित करने के लिए कि बटन अक्षम है, आप इसमें एक विशेषता जोड़ सकते हैं disabledऔर CSS का उपयोग करके बटन को स्टाइल कर सकते हैं ।

यहाँ HTML है जो अक्षम बटन का वर्णन करता है:

<button disabled></button>

यहाँ इस तरह के एक बटन स्टाइल के लिए सीएसएस कोड है:

.c-button[disabled] {
    color: #d2d5db;
    background: #6c7589;
    cursor: not-allowed;
}

जब बटन अक्षम हो जाता है, तो वह कीबोर्ड से फ़ोकस नहीं कर पाता है और पृष्ठ तत्वों की पहुँच ट्री से निकाल दिया जाता है।

जब आप बटन पर होवर करते हैं, तो माउस कर्सर का बाहरी दृश्य

बटन पर मानक माउस पॉइंटर तीर की तरह दिखता है। मुझे StackOverflow पर यह जवाब पसंद है : “बटन एक पारंपरिक डेस्कटॉप नियंत्रण है। यह एक ऐसा वातावरण है जिसमें इंटरनेट युग के आगमन तक हैंड पॉइंटर का उपयोग कभी नहीं किया गया था। जब वेब पेजों पर समान नियंत्रण का उपयोग किया जाने लगा, तो डेवलपर्स ने बटन को डेस्कटॉप अनुप्रयोगों के समान ही बनाने की कोशिश की। "

सूचक के सामान्य व्यवहार को ओवरराइड करने के लिए, मानक कर्सर-तीर को हाथ के आकार के कर्सर में बदलने की सिफारिश की जाती है।

मानक तीर कर्सर और बेहतर हैंड कर्सर।

अब जब हमने बटन स्टाइलिंग के बुनियादी मुद्दों पर चर्चा की है, तो यहां पूर्ण सीएसएस कोड है जिसमें हमने ऊपर छुआ सब कुछ शामिल है:

.c-button {
  min-width: 100px;
  font-family: inherit;
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4676d7;
  color: #fff;
  padding: 8px 16px;
  font-size: 1rem;
  cursor: pointer;
}

.c-button:hover {
  background: #1d49aa;
}

.c-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}

निम्नलिखित अनुभागों में, हम विभिन्न शैलियों और बटन के प्रकारों के बारे में बात करेंगे, जिन्हें आप अपनी परियोजनाओं में उपयोग कर सकते हैं।

आइकन बटन

कभी-कभी आपको एक निश्चित आइकन के लिए एक बटन की आवश्यकता होती है। बटन को हाइलाइट करने के लिए या बटन की भूमिका के बारे में उपयोगकर्ता को बेहतर जानकारी देने के लिए यह आवश्यक हो सकता है। यह महत्वपूर्ण है कि आइकन बटन विकलांग उपयोगकर्ताओं के लिए सुलभ हैं।

आइकन बटन के उदाहरण पिछली छवि में, आइकन बटन हैं। नीचे दिया गया कोड आइकन में जोड़े गए विशेषता को दिखाता हैaria-hidden, जो आपको इसे एक्सेसिबिलिटी ट्री से निकालने की अनुमति देता है। मैंनेfocusable="false"आईई में ध्यान केंद्रित करने से आइकन को रोकने के लिएएक विशेषता भी जोड़ा।

कृपया ध्यान दें कि मैंनेvertical-align: middleआइकन और बटन सामग्री को लंबवत रूप से संरेखित करने केलिए शैलीकाउपयोग किया है।

यहाँ प्रश्न में बटन के लिए HTML कोड है:

<button class="c-button">
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!--    --></svg>
    Add to fav
  </button>

यहाँ शैली कोड है:

.c-button svg {
    display: inline-block;
    vertical-align: middle;
    fill: #fff;
    width: 20px;
    height: 20px;
    margin-right: 0.25rem;
}

जब हम सिर्फ जांच करते हैं, तब तक काम कर सकता है जब तक कि हम बटन के पाठ को छिपाने का निर्णय नहीं लेते हैं और उस बटन को बनाते हैं जिस पर केवल आइकन स्थित है। यह कैसे करना है? पहले आपको पाठ को लपेटने की आवश्यकता है, उदाहरण के लिए, एक तत्व में span। फिर आप बटन की उपस्थिति में एक और सुधार कर सकते हैं। यहाँ बटन का HTML विवरण दिया गया है:

<button class="c-button c-button--icon">
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!--    --></svg>
    <span>Add to fav</span>
  </button>

ऐसा लग सकता है कि अब यह तत्व को छिपाने के लिए पर्याप्त है spanऔर काम हो जाएगा:

.c-button--icon span {
    display: none;
}

हालांकि इस दृष्टिकोण के साथ, पाठ गायब हो जाता है और आइकन बना रहता है, सामग्री की पहुंच के मामले में यह बहुत खराब है। बटन अब स्क्रीन पाठकों के लिए "दृश्यमान" नहीं है। उदाहरण के लिए, मैकओएस पर वॉयसओवर रिपोर्ट करता है कि इस तरह का बटन केवल एक "बटन" है, इसके बारे में कोई विवरण नहीं है। इस समस्या के कई समाधान हैं।

SVG प्रतीक का उपयोग करना

मैं एसवीजी आइकन का उपयोग करना पसंद करता हूं। ग्राफिक तत्वों के सभी एसवीजी विवरणों को एक फ़ाइल में एकत्र करने की सलाह दी जाती है और <svg>तत्व का उपयोग करके टैग में प्रत्येक आइकन को शामिल किया जाता है <use>। यहाँ एक उदाहरण है:

<svg class="c-icon" width="32" height="32" viewBox="0 0 20 20">
    <use xlink:href="icons.svg#facebook"></use>
</svg>

यहां SVG आइकन के लिए कोड है, जिसका विवरण एक फ़ाइल में संग्रहीत है icons.svgऔर एक पहचानकर्ता है #facebook। यह दृष्टिकोण कोड दोहराव को कम करता है।

आइकन के साथ withSize बटन

चूंकि बटन टेक्स्ट अब दिखाई नहीं देता है, और CSS संपत्ति बटन के लिए सेट है, बटन min-widthकी चौड़ाई आइकन के आकार के अनुरूप नहीं होगी। इस सुविधा को ध्यान में रखने के लिए, आइकन बटन की चौड़ाई को स्पष्ट रूप से सेट करना बेहतर है।

एक बटन जिसमें मिनी-चौड़ाई सीएसएस संपत्ति सेट है और एक बटन जिसमें यह संपत्ति सेट नहीं है

.c-button--icon {
  min-width: initial;
  text-align: center;
  padding: 10px 14px;
}

▍विशिष्ट छुपाने वाला पाठ

एक तत्व, लोकप्रिय वर्ग का उपयोग करके .sr-only, इसे स्क्रीन से हटाकर नेत्रहीन छिपाया जा सकता है, लेकिन स्क्रीन पाठकों के लिए इसे सुलभ छोड़ सकता है।

यहाँ HTML कोड है:

<button class="c-button c-button--icon">
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!--    --></svg>
    <span class="sr-only">Add to fav</span>
  </button>

यहाँ शैलियों रहे हैं:

.sr-only {
  border: 0; 
  clip: rect(0 0 0 0); 
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

Size फ़ॉन्ट का आकार 0 पर सेट करें

यदि आप संपत्ति font-sizeको सेट करते हैं 0, तो तत्व spanकिसी भी स्क्रीन स्थान पर कब्जा नहीं करेगा। यानी वह छिपा होगा।

.c-button--icon span {
    font-size: 0;
}

लेकिन यहाँ मैं एक वर्ग के उपयोग से जुड़े समाधान की ओर झुका हूँ .sr-only। मेरे दृष्टिकोण से, यह अधिक तार्किक लगता है। फ़ॉन्ट का आकार 0 पर सेट करके पाठ को छिपाने की विधि, यह मुझे लगता है, एक तरह की हैक की तरह दिखता है।

▍यूरी-लेबल विशेषता

यदि बटन में कोई तत्व नहीं है <span>, तो इसके बिना करने का एक तरीका होना चाहिए। ऐसा ही एक तरीका एक विशेषता का उपयोग करना है aria-label। विशेषता को या तो तत्व को सौंपा गया है <button>, या तत्व को <svg>।

<button class="c-button c-button--icon" aria-label="Add to fav">
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!--    --></svg>
  </button>

यदि आप आइकन वाले बटनों के बारे में अधिक जानना चाहते हैं - इस सामग्री पर एक नज़र डालें ।

पाठ की कई पंक्तियों वाले बटन

कुछ मामलों में, बटन के लिए पाठ की दो पंक्तियों को शामिल करना आवश्यक हो सकता है। इस तरह के एक बटन का एक उदाहरण नीचे दिखाया गया है।

पाठ की दो पंक्तियों वाले बटन

यहां एक सदस्यता फॉर्म के लिए एक बटन है जिसमें मुख्य और सहायक पाठ शामिल हैं। इस तरह के एक बटन बनाने के लिए और एक ही समय में विकलांग लोगों के लिए इसकी पहुंच के बारे में नहीं भूलना चाहिए? यहाँ प्रासंगिक HTML है:

<button class="c-button">
    <span>Subscribe to our newsletter</span>
    <span>240K+ subscribers</span>
</button>

स्क्रीन रीडर "हमारे न्यूजलेटर 240K + ग्राहकों की सदस्यता" के रूप में इस बटन को "आवाज" देगा। जब उपयोगकर्ता यह सुनता है, तो वह उसे भ्रमित कर सकता है, क्योंकि कुछ भी बटन पर प्रदर्शित पाठ की दो पंक्तियों को अलग नहीं करेगा। आइटम की उपलब्धता की जांच करने के लिए क्रोम टूल के स्क्रीनशॉट पर एक नज़र डालें।

Chrome

में तत्वों की उपलब्धता की खोज करना उपयोगकर्ताओं को भ्रमित न करने के लिए, मैं स्क्रीन पाठकों से पाठ की दूसरी पंक्ति को छिपाना पसंद करूंगा। आपaria-hiddenइसी तत्व मेंविशेषता का उपयोग करके ऐसा कर सकते हैं<span>:

<button class="c-button">
    <span>Subscribe to our newsletter</span>
    <span aria-hidden="true">240K+ subscribers</span>
</button>

यदि किसी कारण से आप HTML मार्कअप को नहीं बदल सकते हैं, तो बटन पर अतिरिक्त पाठ जोड़ने का एक और तरीका है। मुझे स्मैशिंग पत्रिका वेबसाइट पर इस समस्या का एक दिलचस्प समाधान मिला। इसमें छद्म तत्वों का उपयोग करके सामग्री रखने में शामिल है। इस दृष्टिकोण के साथ, स्क्रीन पाठकों को कुछ भी शानदार नहीं दिखाई देगा। यहाँ इस समाधान के लिए सीएसएस है:

.c-button--multiple span:after {
    content: "240K+ subscribers";
    display: block;
    font-weight: 400;
    margin-top: 0.25rem;
}

लिंक (<a>) या बटन (<बटन>)?

लिंक का उपयोग कब करें और कब - बटन का उपयोग करें? शुरू करने के लिए, आइए इस बारे में बात करें कि वे एक दूसरे से कैसे भिन्न हैं।

▍Links

टैग <a>एक हाइपरलिंक है जो आपको वेबसाइट के दूसरे पृष्ठ पर जाने या उपयोगकर्ता द्वारा देखे गए पृष्ठ के एक विशिष्ट अनुभाग पर जाने की अनुमति देता है। साथ में टैग के साथ <a>, आप चार छद्म का उपयोग कर सकते हैं: :hover, :focus, :activeऔर :visited। यदि हम पहुंच के दृष्टिकोण से लिंक पर विचार करते हैं, तो हमें यह कहना होगा कि आप Enterकीबोर्ड पर कुंजी का उपयोग करके उनके साथ बातचीत कर सकते हैं । लिंक आवाज वाले और स्क्रीन रीडर हैं।

▍Buttons

<button type="button">जावास्क्रिप्ट कोड को इसके बिना जोड़ने से कोई भी तत्व , कोई क्रिया नहीं करता है। आप इसके साथ छद्म वर्गों का उपयोग कर सकते हैं :hover, :focusऔर :active। यदि हम पहुंच-योग्यता के बारे में बात करते हैं, तो आप कीबोर्ड कीज़ का उपयोग करके बटन के साथ बातचीत कर सकते हैं Enterऔर । स्क्रीन पाठकों बटन की सामग्री "पढ़ें"।

यदि हम डिज़ाइन को याद करते हैं, तो ऐसा होता है कि एक वेब पेज में एक ही शैली के बटन होते हैं, उनका वर्णन करने के लिए उपयोग किए गए HTML कोड के संदर्भ में भिन्न। इसे ध्यान में रखते हुए, क्लास .c-buttonको स्टाइल करने के लिए सीएसएस कोड लिखा जाना चाहिए ताकि इसका उपयोग तत्वों <button>और तत्वों दोनों के लिए किया जा सके <a>। निम्नलिखित उदाहरण पर विचार करें।

लिंक और बटन का उपयोग करते हुए

ध्यान दें कि पृष्ठ पर "बटन" उसी तरह से स्टाइल किए गए हैं। हालांकि, उनमें से पहला, वास्तव में, एक तत्व है<a>, और दूसरा एक तत्व है<button>। इसका मतलब यह है कि बटन आवश्यक रूप से HTML में एक तत्व की तरह नहीं दिखता है<button>।

शैली में दो जोड़ हैं.c-button। ये गुण हैंtext-decoration: none;औरtext-align: center;। डिफ़ॉल्ट रूप से, लिंक के पाठ को रेखांकित किया गया है, इसलिए हम उपयोग की गई कक्षा को स्टाइल करके इसे बदलना चाहते हैं। इसके अलावा, हमारे लिए उन मामलों में बटन की सामग्री को केंद्र में रखना महत्वपूर्ण है, जहां बटन का वर्णन करने के लिए इसके अलावा एक HTML तत्व का उपयोग किया जाता है<button>।

.c-button {
    /*   */
    /*     */
    text-decoration: none;
    text-align: center;
}

Like <बटन> तत्व को बटन की तरह नहीं देखना है

मुझे यह उदाहरण पसंद है , जिसमें, सामग्री की पहुंच की आवश्यकताओं को ध्यान में रखते हुए, "समझौते" पैनल को लागू किया जाता है। प्रारंभ में, मान लेना कि जावास्क्रिप्ट उपलब्ध नहीं है, मार्कअप रेंडरिंग परिणाम नीचे की तरह दिखता है।

पृष्ठ सामग्री

जब जावास्क्रिप्ट उपलब्ध नहीं है, तो ऐसे मार्कअप के टुकड़े के लिए HTML कोड है:

<div class="accordion" data-aria-accordion>
  <h2 data-aria-accordion-heading>Heading of my panel</font></h2>
  <div data-aria-accordion-panel>
    <p>Content goes here</p>
  </div>
</div>

यदि जावास्क्रिप्ट उपलब्ध है, तो उपरोक्त मार्कअप उन तत्वों का वर्णन करेगा जो ढह सकते हैं और विस्तारित हो सकते हैं। यह एक बटन बनाकर और तत्व को जोड़कर प्राप्त किया जाता है <h2>।

जब जावास्क्रिप्ट कार्यक्षमता उपलब्ध हो तो ऐसी स्थिति में पृष्ठ सामग्री

। इस मामले में, हम कह सकते हैं कि तत्व<button>काउपयोगकरना सही विकल्प है, क्योंकि बटन पाठ के विस्तार और टूटने की समस्या को हल करता है।

▍बूट बटन

मान लीजिए हमारे पास एक दस्तावेज है। हमें इसे डाउनलोड करने के लिए एक लिंक का वर्णन करने की आवश्यकता है। इस समस्या को हल करने के लिए किस तत्व का उपयोग किया जाना चाहिए? यहाँ हमारी सहायता के लिए एक लिंक आएगा! यदि आप लिंक में कोई विशेषता जोड़ते हैं download, तो उस पर क्लिक करने से संबंधित सामग्री डाउनलोड हो जाएगी।

दस्तावेज़ को डाउनलोड करने के लिए लिंक, एक बटन के रूप में डिज़ाइन किया गया है

यहां इस लिंक का कोड है:

<a href="rtl-101.pdf" download>Download PDF</a>

इस दृष्टिकोण के साथ, हमारे पास हमारे निपटान में एक लिंक है, जिसे एक बटन के रूप में स्टाइल किया गया है, जो केवल शब्दार्थ HTML संरचनाओं का उपयोग करके अपना काम करता है।

स्ट्रोक बटन

जब आप इसके ऊपर मंडराते हैं तो एक नियमित बटन स्ट्रोक के साथ एक बटन बन जाता है।

पिछला आंकड़ा एक बटन दिखाता है जो एक स्ट्रोक के साथ एक बटन बन जाता है जब आप उस पर मंडराते हैं। बटन की उपस्थिति में समान परिवर्तन को लागू करने के लिए किस विधि का सबसे अच्छा उपयोग किया जाता है? शुरुआत के लिए, बटन शैली में एक संपत्ति शामिल होनी चाहिएborder, जो डिफ़ॉल्ट रूप से, पारदर्शी रंग का उपयोग करती है। ऐसी संपत्ति प्रदान करके, हम यह सुनिश्चित करते हैं कि बटन की सीमाएं, जब आप उस पर मंडराते हैं, तो फिर से न करें।

.c-button {
    border: 2px solid transparent;
    /*   */
}

.c-button:hover {
    background: transparent;
    color: #222;
    border-color: #4676d7;
}

इस दृष्टिकोण के लिए धन्यवाद, हमारे पास हमारे निपटान में एक बटन है, जिसके चारों ओर जब आप इसे दबाते हैं, तो इसकी सीमाएं प्रदर्शित होती हैं। इस स्थिति में, बटन पृष्ठभूमि पारदर्शी हो जाती है।

स्नातक बटन

जब मैं पोजिशनिंग तत्वों पर एक लेख पर काम कर रहा था , तो मुझे एक ग्रेडिएंट फिल के साथ एक बटन की आवश्यकता थी।

मुझे निम्न आकृति के समान कुछ चाहिए था।

ग्रैडिएंट बटन और एक स्ट्रोक के साथ इसका वेरिएंट

एक बटन के लिए दो विकल्प हैं - एक ढाल बटन और एक स्ट्रोक के साथ एक बटन। बटन की ऐसी उपस्थिति को प्राप्त करने के लिए, मुझे पारदर्शी सीमा होने के लिए आधार (ढाल) बटन की आवश्यकता थी। यह बॉर्डर केवल एक स्ट्रोक वाले बटन के लिए दिखाया जाएगा।

.c-button {
      display: inline-block;
      color: #fff;
      background: linear-gradient(to bottom, #00acee, #0072e0);
      font-size: 18px;
      font-weight: 500;
      padding: 12px 26px;
      border-radius: 100px;
      /*  ,          */
      border: 3px solid transparent;
      text-decoration: none;
}

.c-button--outline {
  background: transparent;
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

यहां सब कुछ उचित प्रतीत होता है, लेकिन काम के दौरान मैं एक अजीब समस्या में भाग गया। मैंने ट्विटर उपयोगकर्ताओं से मदद मांगकर इसे हल करने की भी कोशिश की । यह समस्या निम्नलिखित आकृति में प्रस्तुत की गई है।

एक नियमित बटन, एक ढाल के साथ एक बटन (सीमा वास्तव में पारदर्शी है; यह केवल रंगीन उद्देश्यों के लिए दिखाया गया है), अजीब किनारों के साथ एक बटन

अब हम यह पता लगा चुके हैं कि पारदर्शी सीमा के साथ ढाल बटन कैसा दिखता है, आइए मैं आपको उपरोक्त विषमताओं के कारणों के बारे में बताता हूं। ।

प्रत्येक तत्व में एक संपत्तिbackground-originहोती है जो वॉलपेपर के स्थिति क्षेत्र को परिभाषित करती है, जो डिफ़ॉल्ट मान पर सेट होती हैpadding-box। इस दृष्टिकोण के साथ, ढाल का आकार चुना जाता है ताकि यह तत्व के आकार से मेल खाता हो, सीमा की मोटाई को ध्यान में रखते हुए।

मैंने बटन पर एक विस्तृत बॉर्डर जोड़ने की कोशिश की ताकि यह हो सके कि क्या होता है। ध्यान दें कि ढाल कैसे दोहराता है, और इसका आकारpaddingबटनकी संपत्ति से मेल खाता है।

। विस्तृत सीमाओं और ढाल के साथ बटन

इस समस्या को हल करने के लिए, पृष्ठभूमि चित्र की स्थिति क्षेत्र शैली का उपयोग निर्धारित किया जाना चाहिएbackground-origin: border-box;डिफ़ॉल्ट मान बदल रहा है,padding-boxकरने के लिएborder-box:

.c-button {
      /*   */
      background-origin: border-box;
}

अब , यदि आप प्रयोग करना चाहते हैं, तो कोडपेन पर एक उदाहरण।

कौन सा बेहतर है - ऊंचाई या गद्दी?

प्रत्येक बटन की एक ऊंचाई है। आप अपनी संपत्ति को स्पष्ट रूप से सेट करके या बटन के ऊपरी और निचले हिस्से के लिए heightएक संपत्ति निर्धारित करके एक बटन की ऊंचाई को नियंत्रित कर सकते हैं padding। कृपया ध्यान दें कि जिन समस्याओं के बारे में हम नीचे चर्चा करेंगे, वे मुख्य रूप से तत्वों के लिए विशिष्ट हैं <a>।

▍ निश्चित ऊंचाई

मान लीजिए कि हमारे पास एक बटन है जो इस प्रकार है:

.c-button {
    /*   */
    min-width: 120px;
    height: 45px;
}

इस दृष्टिकोण के साथ, पाठ केंद्रित नहीं है। यह सब नीचे एक जैसा दिखता है।

बटन, जिसका पाठ केंद्र

में संरेखित नहीं है उसे ठीक करने और पाठ संरेखित करने के लिए, आप या तो संपत्ति का उपयोग कर सकते हैंpadding, या संपत्ति काline-height। इसेline-heightबटन के बराबर या उसके बराबर मान परसेट करके, हम केंद्र में पाठ संरेखित कर सकते हैं।

.c-button {
    /*   */
    min-width: 120px;
    height: 45px;
    line-height: 45px;
}

लेकिन इस विधि के नुकसान हैं:

यह गारंटी नहीं है कि बटन पाठ हमेशा सही ढंग से केंद्रित होगा। यदि आप फ़ॉन्ट बदलते हैं, तो इसका संरेखण टूट सकता है।
संपत्ति द्वारा निर्दिष्ट मूल्य में वृद्धि करते समय font-size, आपको संपत्ति के लिए एक नया मूल्य चुनने की आवश्यकता होती है line-height।
line-height विभिन्न भाषाओं में प्रदर्शित ग्रंथों के लिए संपत्ति अलग तरह से काम कर सकती है। यह बहुभाषी साइटों के लिए सच है।
यदि पाठ की दो पंक्तियों के साथ एक बटन है, तो यह विधि बटन की सामग्री को संरेखित करने के लिए उपयुक्त नहीं है।

Ent वर्टिकल इंडेंट

यदि आप गुणों padding-topऔर गुणों के लिए समान मान सेट करते हैं padding-bottom, तो बटन की सामग्री को केंद्रित करने की अपेक्षा करें। जिस तरह से यह है? वास्तव में, यह विशिष्ट स्थिति पर निर्भर करता है।

फोंट हैं जो बहुत अच्छी तरह से केंद्र में हैं। और ऐसे भी हैं जो अलग व्यवहार करते हैं। कभी-कभी, लक्ष्य को प्राप्त करने के लिए, ऊर्ध्वाधर इंडेंटेशन के मूल्यों में से एक को थोड़ा बदलना होगा। अगले बटन पर एक नज़र डालें।

केंद्र बटन पाठ का प्रयास

यहां इस बटन को स्टाइल करने के लिए CSS कोड है:

.c-button {
    /*   */
    min-width: 120px;
    padding: 16px 14px;
}

इस मामले में, बटन की सामग्री थोड़ा पक्षपाती दिखती है। ऊपरी इंडेंट का मूल्य थोड़ा कम होना चाहिए:

.c-button {
    /*   */
    min-width: 120px;
    padding: 14px 14px 16px 14px; /* ,  , ,   */
}

<Span> टैग में रैपिंग बटन सामग्री

प्रयोगों के दौरान, मुझे पता चला कि एडोब बटन के पाठ का संरेखण थोड़ा खटखटाया गया है। यहाँ है कि यह कैसा दिखता है।

थोड़ा खटखटाने पर

मैंने इन बटनों की जांच की और एक दिलचस्प पैटर्न देखा। सामग्री को<span>बटन के लिए एक निश्चित ऊंचाई का संकेतदेने वाले तत्व में लपेटा गया है।

<button class="c-button-adobe">
    <span>Save Changes</span>
</button>

एक <button>तत्व के लिए <span>, तत्व , डिफ़ॉल्ट रूप से, केंद्रित है। जब ऊंचाई बदलती है, तो संपत्ति paddingया किसी अन्य चीज की आवश्यकता के बिना सामग्री स्वचालित रूप से केंद्रित होती है। यहाँ इस व्यवहार का एक एनिमेटेड प्रदर्शन है।

एक बटन की ऊंचाई को बदलना और इसकी सामग्री को स्वचालित रूप से केंद्रित करना

सच है, अगर हम एक लिंक के बारे में बात कर रहे हैं जो बटन की तरह दिखता है, तो तत्व<span>को केंद्रित करने की आवश्यकता है। इस सुविधा को ध्यान में रखने के लिए, कोई भी तत्वों को व्यवस्थित करने की विधि का उपयोग कर सकता हैflexbox।

.c-button {
    /*   */
    display: inline-flex; *To keep the button inline, and flex container at the same time*
    align-items: center;
    justify-content: center;
}

बस इतना ही। मैं यह नोट करना चाहता हूं कि इस लेख ने इस खंड को लिखते समय मेरी मदद की ।

फ्लेक्सबॉक्स या ग्रिड कंटेनरों के अंदर बटन

यहां आपके पास एक सवाल हो सकता है कि फ्लेक्स और ग्रिड लेआउट के साथ क्या करना है। इस प्रश्न को स्पष्ट करता हूं।

मैंने एक परियोजना के एक भाग पर काम किया। मुझे इसकी सामग्री को लंबवत रूप से केंद्रित करने की आवश्यकता थी। इसलिए मैंने फ्लेक्स लेआउट का उपयोग किया:

.c-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

मैंने जो किया वह थोड़ा आश्चर्यजनक था।

फ्लेक्स लेआउट का उपयोग करने का परिणाम

डिफ़ॉल्ट रूप से, प्रत्येक फ्लेक्स तत्व मूल तत्व की चौड़ाई के भीतर खींचा जाता है। पिछले आंकड़े में दिखाए गए बटन के साथ ठीक यही हुआ है। इस परेशानी से बचने के लिए, आपको संपत्ति को कॉन्फ़िगर करने की आवश्यकता हैalign-self:

.c-button {
    /*   */
    align-self: flex-start;
}

इसके बाद बटन कैसा दिखेगा।

एक बटन बहुत बेहतर दिखता है।

एक अन्य सामान्य समस्या तब होती है जब एक बटन फ्लेक्स कंटेनर में रखा जाता है, जिसमें, डिफ़ॉल्ट रूप से, एक गुण सेट होता हैflex-direction: row। बटन की ऊंचाई को मूल तत्व की ऊंचाई से समायोजित किया जाएगा। इस समस्या को ठीक करने के लिए, आपको बटनalign-selfसंपत्ति या फ्लेक्स कंटेनर संपत्तिका उपयोग करने की आवश्यकता हैalign-items।

बटन ऊँचाई में फैला है

यहाँ CSS है:

.c-button {
    align-self: center;
}

कंटेनर के केंद्र के सापेक्ष बटन के संरेखण को सेट करके, हम समस्या को हल करते हैं। अब ऐसा ही उदाहरण देखने को मिलेगा।

स्ट्रेच बटन की समस्या का समाधान

इम इकाइयों का उपयोग करना

माप की इकाई का emउपयोग बटन आकारों को ठीक से कॉन्फ़िगर करने के लिए किया जा सकता है। ऐसी स्थिति में माप की यह इकाई बहुत उपयोगी है। इकाई तत्व ( या ) के emबराबर है । निम्नलिखित उदाहरण पर एक नज़र डालें:font-sizepxrem

.element {
    font-size: 16px;
    padding: 0.5em;
}

इस मामले में, गद्दी का मूल्य बराबर है 16 * 0.5 px।

मान लें कि परियोजना तीन आकारों के बटन का उपयोग करती है: नियमित, मध्यम और बड़ी। मान निर्दिष्ट करने जब padding, width, height, marginमाप की इकाइयों में इस्तेमाल किया em, यह आप एक बटन, आयाम जिनमें से परिवर्तन करने के लिए बहुत आसान है बनाने के लिए अनुमति देता है। यहाँ है कि यह कैसा दिखता है।

विभिन्न आकारों के बटन

लेकिन यहां सीएसएस कोड के टुकड़े हैं जो माप की इकाई का उपयोग करते हैंem:

.c-button {
  /*   */
  font-size: 1rem;
  min-width: 6.25em;
  border-radius: 0.3125em;
  padding: 0.625em 1em;
}

.c-button svg {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.25em;
}

विभिन्न प्रकार के बटनों के लिए, आपको अलग-अलग फ़ॉन्ट आकार निर्दिष्ट करने वाली कक्षाएं बनाने की आवश्यकता है:

.c-button--md {
  font-size: 22px;
}

.c-button--lg {
  font-size: 30px;
}

→ यहाँ CodePen पर समान बटन का उपयोग करने का एक उदाहरण दिया गया है

→ इस विषय पर मेरा लेख यहाँ है । मेरा सुझाव है कि आप इसे पढ़ें

एनिमेशन और बदलाव

उपयोगकर्ता को पृष्ठ के साथ काम करने के लिए इसे और अधिक सुखद बनाने के लिए, जब आप बटन पर हॉवर करते हैं, तो संक्रमण का उपयोग करने के बारे में सोचना महत्वपूर्ण है। ऐसा करने का सबसे आसान तरीका पृष्ठभूमि रंग परिवर्तन का आयोजन है। यहां CodePen पर एक उदाहरण है जहां आप इस विचार के कार्यान्वयन को देख सकते हैं।

सारांश

इस सामग्री पर काम करके मुझे बहुत खुशी हुई। इसे लिखने में मुझे एक साल से ज्यादा का समय लगा। मुझे खुशी है कि यह अंततः प्रकाशित हुआ है। मुझे आशा है कि आपको यहां कुछ मिलेगा जो आपके लिए उपयोगी है।

प्रिय पाठकों! क्या आप इस लेख के दायरे से परे बटन के साथ काम करने के किसी भी उपयोगी तरीके के बारे में जानते हैं?

पुराने पुराने बटन तत्व को स्टाइल करना