यह उदाहरण केवल जनरेटर के कंट्रोल्स का उपयोग करता है। ऊपर दी गई छवियां सामान्य HTML बटनों पर लागू वास्तविक डाउनलोड की गई स्टाइलशीट दिखाती हैं, न कि एडिटर के स्क्रीनशॉट।
सिग्नेचर के साथ शुरू करें
CSS बटन जनरेटर खोलें। प्रीसेट्स में, एवरीडे कलेक्शन से सिग्नेचर चुनें। बटन टेक्स्ट को “Get started” पर सेट करें। कोड क्षेत्र में, क्लास नाम को cta-button पर सेट करें।
एक प्रीसेट डिफ़ॉल्ट और होवर स्टाइल को बदल देता है, जबकि आपका लेबल और क्लास नाम वही रहता है। विस्तृत समायोजन करने से पहले अपना शुरुआती बिंदु चुनें।
क्लास नाम CSS नियमों को आपके HTML बटन से जोड़ता है। जनरेटर असमर्थित वर्णों को हटा देता है; असंबंधित तत्वों को स्टाइल करने से बचने के लिए एक छोटा, विशिष्ट नाम उपयोग करें।
ग्रेडिएंट पिल बनाएं
एडिटिंग स्टेट को डिफ़ॉल्ट पर रखें। टेक्स्ट में, सिस्टम सैन्स चुनें, फ़ॉन्ट साइज़ 18 px, और वेट बोल्ड रखें। सफेद टेक्स्ट रंग, सामान्य स्टाइल, केंद्रित अलाइनमेंट और लाइन हाइट 1.4 रखें।
फिल में, लीनियर ग्रेडिएंट चुनें। नीचे दिए गए दो रंगों और कोण का उपयोग करें। हॉरिजॉन्टल पैडिंग को 32 px और वर्टिकल पैडिंग को 16 px पर सेट करें। शेप में, लिंक ऑल कॉर्नर्स को इनेबल्ड रखें और कॉर्नर रेडियस को 100 px पर सेट करें। बॉर्डर विड्थ 0 px रहेगी।
शैडो में, बॉक्स शैडो को इनेबल्ड रखें। हॉरिजॉन्टल ऑफसेट 0 px, वर्टिकल ऑफसेट 8 px, ब्लर 24 px, स्प्रेड −4 px, रंग #460BD8, और ओपेसिटी 32% का उपयोग करें। इनसेट शैडो और टेक्स्ट शैडो को बंद रखें।
पैडिंग टेक्स्ट के चारों ओर की जगह बदलती है। कॉर्नर रेडियस आउटलाइन को बदलता है। एक बड़ा रेडियस लेबल को चौड़ा किए बिना यह पिल आकार बनाता है।
होवर को अपना ट्रीटमेंट दें
एडिटिंग स्टेट को होवर पर स्विच करें। फिल में, बैकग्राउंड कलर को #33099E और सेकंड कलर को #6D20BF में बदलें। ग्रेडिएंट एंगल को 135° पर रखें। शैडो में, वर्टिकल ऑफसेट को 10 px और ब्लर को 28 px में बदलें। अन्य सेटिंग्स को अपरिवर्तित छोड़ दें।
प्रत्येक स्टेट का निरीक्षण करने के लिए कैनवास डिफ़ॉल्ट, होवर और एक्टिव बटनों का उपयोग करें। आप प्रीव्यू बटन पर होवर या प्रेस भी कर सकते हैं। इसके किनारे और शैडो की समीक्षा करने के लिए कैनवास को लाइट और डार्क के बीच बदलें।
एडिटिंग स्टेट चुनता है कि आप कौन सी स्टाइल बदलते हैं। कैनवास स्टेट केवल वही बदलता है जिसे आप प्रीव्यू करते हैं। रेस्टिंग अपीयरेंस को समायोजित करने से पहले डिफ़ॉल्ट एडिटिंग पर लौटें।
होवर प्रॉपर्टीज जो अभी भी डिफ़ॉल्ट से मेल खाती हैं, बाद के डिफ़ॉल्ट संपादन का पालन करती हैं। एक बार जब आप होवर प्रॉपर्टी को कस्टमाइज़ कर लेते हैं, तो यह स्वतंत्र रहती है। बेस स्टाइल बदलने के बाद दोनों स्टेट्स की दोबारा जांच करें।
अपने पेज में एक्सपोर्ट और टेस्ट करें
CSS टैब चुनें और कॉपी CSS का उपयोग करें, या cta-button.css को सेव करने के लिए डाउनलोड चुनें। HTML टैब चुनें और मिलान करने वाले बटन मार्कअप को कॉपी करें। HTML में वही क्लास नाम और type="button" वाला बटन शामिल है।
अपनी स्टाइलशीट में CSS जोड़ें, या अपने पेज से डाउनलोड की गई फ़ाइल को लिंक करें। HTML को वहां रखें जहां बटन होना चाहिए। दो एक्सपोर्ट एक साथ काम करते हैं: केवल एक HTML बटन में इसकी स्टाइलिंग शामिल नहीं होती है।
पेज खोलें और इसके डिफ़ॉल्ट, होवर, कीबोर्ड फोकस और प्रेस्ड स्टेट्स का परीक्षण करें। एक्सपोर्ट में फोकस-विजिबल आउटलाइन, एक छोटा एक्टिव मूवमेंट और रिड्यूस्ड-मोशन नियम शामिल है। आपकी आसपास की स्टाइल और इंस्टॉल किए गए फ़ॉन्ट अभी भी परिणाम को प्रभावित कर सकते हैं।
जनरेट किया गया बटन एक स्टाइल किया हुआ कंट्रोल है। अपने प्रोजेक्ट में इसके क्लिक व्यवहार को कनेक्ट करें; फॉर्म में जोड़ते समय सही बटन प्रकार का उपयोग करें।
cta-button.css
डाउनलोड की गई फ़ाइल का नाम क्लास नाम का अनुसरण करता है।
सामान्य प्रश्न
क्या मुझे CSS फ्रेमवर्क की आवश्यकता है?
नहीं। आउटपुट मानक CSS प्लस एक साधारण HTML बटन है। CSS को अपनी स्टाइलशीट में पेस्ट करें और बटन पर मिलान करने वाली क्लास का उपयोग करें।
क्या डाउनलोड HTML को भी सेव करता है?
डाउनलोड क्लास के नाम पर एक .css फ़ाइल सेव करता है। बटन मार्कअप को HTML टैब से अलग से कॉपी करें।
क्या मैं प्रत्येक कोने को अलग रेडियस दे सकता हूँ?
हाँ। शेप में, लिंक ऑल कॉर्नर्स को बंद करें, फिर टॉप लेफ्ट, टॉप राइट, बॉटम राइट और बॉटम लेफ्ट को स्वतंत्र रूप से सेट करें। यह उदाहरण पिल आकार के लिए उन्हें लिंक रखता है।
क्या मेरा डिज़ाइन अगली बार भी यहाँ रहेगा?
स्टूडियो वर्तमान ड्राफ्ट को इस ब्राउज़र के लोकल स्टोरेज में सहेजने का प्रयास करता है। यह कोई अकाउंट या क्रॉस-डिवाइस बैकअप नहीं है। ब्राउज़र सेटिंग्स, साइट डेटा को साफ़ करना, या रीसेट करने से यह हट सकता है या बदल सकता है, इसलिए जिस काम को आप रखना चाहते हैं उसे एक्सपोर्ट कर लें।
क्या मेरा बटन किसी सर्वर पर अपलोड होता है?
स्टाइलिंग प्रीव्यू और CSS/HTML जनरेशन आपके ब्राउज़र में चलते हैं। एक्सपोर्ट बनाने के लिए एडिटर आपके बटन टेक्स्ट या स्टाइलिंग ड्राफ्ट को अपलोड नहीं करता है।
अपने अगले बटन को अपनी खुद की स्टाइल दें।
एक शुरुआती बिंदु चुनें, विवरण समायोजित करें, और कोड को अपने प्रोजेक्ट में लाएं।