CSS बटन को दृश्य रूप से डिज़ाइन करना
अवलोकन
बटन किसी भी साइट पर सबसे अधिक उपयोग होने वाले तत्वों में से एक हैं, और उनका रूप — पैडिंग, रंग, कोने, छाया, होवर अवस्था — सही करने में बहुत सारा छोटा-छोटा CSS लगता है। बटन जनरेटर आपको दृश्य नियंत्रणों से बटन को स्टाइल करने और उसे लाइव देखने देता है, फिर सटीक CSS कॉपी करता है। यह टूल आपके ब्राउज़र में उपयोग-योग्य बटन शैलियाँ बनाता है ताकि आप शुरू से CSS लिखे बिना किसी डिज़ाइन से मिला सकें।
कैसे उपयोग करें (चरण-दर-चरण)
- 1
आधार शैली सेट करें
बटन के लिए पृष्ठभूमि व टेक्स्ट रंग, पैडिंग, कोना त्रिज्या और फ़ॉन्ट चुनें।
- 2
होवर अवस्था जोड़ें
परिभाषित करें कि होवर पर बटन कैसे बदलता है — रंग बदलाव, छाया या हल्की गति।
- 3
CSS कॉपी करें
उत्पन्न बटन CSS (और यदि दिया हो तो HTML) अपने प्रोजेक्ट में चिपकाएँ।
यह कैसे काम करता है
आप नियंत्रणों से प्रॉपर्टीज़ — पृष्ठभूमि रंग, टेक्स्ट रंग, पैडिंग, कोना त्रिज्या, बॉर्डर, फ़ॉन्ट और छाया — समायोजित करते हैं जबकि लाइव पूर्वावलोकन बटन दिखाता है। कई जनरेटर आपको होवर अवस्था सेट करने भी देते हैं ताकि बटन कर्सर पर प्रतिक्रिया दे। संतुष्ट होने पर, टूल आपके प्रोजेक्ट में चिपकाने हेतु CSS (और अक्सर HTML) देता है। सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है।
कब उपयोगी है
अपने ब्रांड से मिलती कॉल-टू-एक्शन बटन को स्टाइल करना। बटन प्रकारों (प्राथमिक, द्वितीयक, घोस्ट) का तेज़ प्रोटोटाइप बनाना। बिना बार-बार आज़माए होवर या सक्रिय अवस्था का CSS पाना। सीखना कि पैडिंग, त्रिज्या और छाया कैसे बटन के रूप में जुड़ते हैं। साइट भर में पुनः उपयोग हेतु एक सुसंगत बटन शैली बनाना। किसी डिज़ाइन मॉकअप के बटन से मिलाना।
अक्सर पूछे जाने वाले प्रश्न
क्रियाओं (सबमिट, टॉगल) हेतु <button> तत्व और किसी अन्य पेज पर नेविगेशन हेतु <a> उपयोग करें। दोनों को उत्पन्न CSS से स्टाइल करें, पर सुगम्यता हेतु सही तत्व चुनें — स्क्रीन रीडर और कीबोर्ड इस पर निर्भर करते हैं।
महत्वपूर्ण सूचनाएँ
एक सुंदर बटन को भी सुगम्यता की बुनियादी बातें चाहिए: पर्याप्त कंट्रास्ट, स्पष्ट फ़ोकस अवस्था, और पर्याप्त बड़ा टैप लक्ष्य। होवर और सक्रिय अवस्थाओं का भी परीक्षण करें, क्योंकि जो शैली स्थिर में शानदार दिखती है वह अंतःक्रिया पर अस्पष्ट हो सकती है।