एक बटन को विज़ुअली स्टाइल करें और अपनी वेबसाइट पर उपयोग करने के लिए HTML और CSS प्राप्त करें। एक प्रीसेट से शुरुआत करें, टाइपोग्राफी, रंग, आकार और छाया को समायोजित करें, फिर एक्सपोर्ट करने से पहले इंटरैक्शन स्थितियों का पूर्वावलोकन करें।
Everyday, Classic, Shaped, Expressive, Gradients और Elite कलेक्शन में 44 प्रीसेट ब्राउज़ करें। प्रत्येक प्रीसेट एक शुरुआती बिंदु है जिसे आप संपादित कर सकते हैं।
प्रीसेट आपके डिज़ाइन को कैसे प्रभावित करते हैं
पहले चुनें, फिर फाइन-ट्यून करें
गैलरी को सीमित करने के लिए स्टाइल कलेक्शन का उपयोग करें। प्रीसेट लागू करने से डिफ़ॉल्ट और होवर दोनों स्टाइल बदल जाते हैं, जबकि आपके बटन का टेक्स्ट और क्लास नाम सुरक्षित रहता है।
एक साधारण सॉलिड फिल, एक शेप्ड कॉर्नर, एक स्पष्ट आउटलाइन, या अधिक सजावटी उपचार आज़माएं। एक बार जब आपको दिशा मिल जाए, तो विवरणों को अपने पेज के अनुकूल बनाने के लिए अन्य टैब का उपयोग करें।
लेबल को सही महसूस कराएं
बटन टेक्स्ट, फ़ॉन्ट परिवार, आकार, वेट, स्पेसिंग, लाइन हाइट, अलाइनमेंट और टेक्स्ट का रंग सेट करें। काम करते समय लेबल को अपडेट होते हुए देखें।
टेक्स्ट और स्पेसिंग को फाइन-ट्यून करें
टाइपोग्राफी जो एक्शन के अनुकूल हो
टेक्स्ट में फ़ॉन्ट कंट्रोल और दूसरा बटन टेक्स्ट फ़ील्ड होता है। फ़ॉन्ट का आकार 10 से 80 px तक होता है; सूचीबद्ध परिवार विज़िटर के डिवाइस पर उपलब्ध फ़ॉन्ट का उपयोग करते हैं।
एक छोटा लेबल उपयोग करें जो एक्शन का वर्णन करे। फिल में, हॉरिजॉन्टल और वर्टिकल पैडिंग टाइप के आकार को बदले बिना उसके चारों ओर जगह जोड़ते हैं। उस पेज पर लंबे लेबल की जांच करें जहां बटन का उपयोग किया जाएगा।
सॉलिड या ग्रेडिएंट फिल चुनें
एक बैकग्राउंड रंग का उपयोग करें या लीनियर ग्रेडिएंट के साथ दो रंगों को मिलाएं। कलर पिकर और हेक्स इनपुट आपको विज़ुअली या सटीक रूप से काम करने देते हैं।
रंग और ग्रेडिएंट दिशा सेट करें
दो रंग, एक स्पष्ट दिशा
फिल में, फिल स्टाइल को लीनियर ग्रेडिएंट में बदलें ताकि दूसरा रंग और ग्रेडिएंट एंगल दिखाई दे। एंगल 0 से 360 डिग्री तक होता है।
हेक्स फ़ील्ड छह-अंकीय पूर्ण रंग या तीन-अंकीय शॉर्टहैंड स्वीकार करते हैं। ग्रेडिएंट के दोनों सिरों पर सफेद या रंगीन लेबल का परीक्षण करें; स्टूडियो स्वचालित रूप से टेक्स्ट कंट्रास्ट को प्रमाणित नहीं करता है।
आउटलाइन और गहराई को नियंत्रित करें
लिंक्ड या स्वतंत्र कॉर्नर, बॉर्डर की चौड़ाई और स्टाइल, बॉक्स शैडो और टेक्स्ट शैडो को समायोजित करें। बटन को ऐसा आकार दें जो उसके संदर्भ के अनुकूल हो।
कॉर्नर, बॉर्डर और शैडो एक्सप्लोर करें
एक स्पष्ट आयत से एक सॉफ्ट पिल तक
शेप में, एक साझा रेडियस के लिए 'लिंक ऑल कॉर्नर' चालू रखें, या प्रत्येक कॉर्नर को सेट करने के लिए इसे बंद करें। बॉर्डर स्टाइल में सॉलिड, डैश, डॉटेड, डबल, इनसेट, आउटसेट, रिज, ग्रूव और नन शामिल हैं।
शैडो में, हॉरिजॉन्टल और वर्टिकल ऑफ़सेट, ब्लर, रंग और ओपेसिटी सेट करें। बॉक्स शैडो में स्प्रेड और एक इनसेट स्विच भी होता है। टेक्स्ट शैडो अलग है, इसलिए आप बटन की आउटलाइन बदले बिना लेबल में गहराई जोड़ सकते हैं।
इंटरैक्शन भी डिज़ाइन करें
डिफ़ॉल्ट और होवर स्टाइल को अलग-अलग संपादित करें। डिफ़ॉल्ट, होवर और एक्टिव अपीयरेंस का पूर्वावलोकन करें, फिर लाइट और डार्क कैनवस पर बटन की तुलना करें।
संपादन और पूर्वावलोकन स्थितियों को समझें
दो संपादन योग्य स्टाइल, तीन पूर्वावलोकन स्थितियां
संपादन स्थिति चुनती है कि आपके कंट्रोल किस स्टाइल को बदलते हैं। कैनवस स्थिति बटन केवल पूर्वावलोकन चुनते हैं। पूर्वावलोकन पर होवर करने या दबाने से उसका इंटरैक्शन भी दिखाई देता है।
होवर वैल्यू जो अभी भी डिफ़ॉल्ट से मेल खाती हैं, कस्टमाइज़ होने तक बेस एडिट का पालन करती हैं। एक्सपोर्ट किए गए CSS में आवश्यकतानुसार एक होवर नियम, एक फोकस-विज़िबल आउटलाइन, एक एक्टिव मूवमेंट और एक रिड्यूस्ड-मोशन नियम शामिल है।
CSS को अपने प्रोजेक्ट में लाएं
जनरेट किया गया CSS और मेल खाता HTML बटन कॉपी करें, या स्टाइलशीट डाउनलोड करें। एक क्लास नाम दोनों टुकड़ों को जुड़ा रखता है।
कॉपी करें, डाउनलोड करें और अपना काम सुरक्षित रखें
सादा कोड जिसे आप सीधे उपयोग कर सकते हैं
एक विशिष्ट क्लास नाम चुनें, इसके टैब से CSS कॉपी करें, फिर HTML से बटन कॉपी करें। डाउनलोड क्लास के नाम पर एक .css फ़ाइल सेव करता है; यह एक पूर्ण वेबपेज डाउनलोड नहीं करता है।
पूर्वावलोकन और कोड जनरेशन आपके ब्राउज़र में चलते हैं। स्टूडियो इस ब्राउज़र के लोकल स्टोरेज में एक ड्राफ्ट याद रखने की कोशिश करता है; जिसे आप रखना चाहते हैं उसे एक्सपोर्ट करें। रीसेट स्टूडियो को उसकी शुरुआती स्टाइल पर लौटा देता है।
टेक्स्ट और स्टाइल अंदर। HTML और CSS बाहर।
किसी अपलोड की आवश्यकता नहीं है। JavaScript आपके ब्राउज़र में लाइव एडिटर को पावर देता है। HTML और CSS को अलग-अलग कॉपी करें, या CSS स्टाइलशीट डाउनलोड करें। जनरेट किया गया फ़ॉन्ट स्टैक व्यूअर के डिवाइस पर उपलब्ध फ़ॉन्ट का उपयोग करता है।
