CSS3 ट्यूटोरियल एक चिकना / बंद बटन बनाएँ
एक बटन का उपयोग करना, अब तक, इलेक्ट्रॉनिक सामान के साथ बातचीत करने का पसंदीदा तरीका है; जैसे कि रेडियो, टीवी, म्यूजिक प्लेयर, और यहां तक कि एक स्मार्टफोन जिसमें वॉयस कमांड फीचर है, उसे अभी भी कम से कम एक या दो फिजिकल बटन की जरूरत है.
इसके अलावा, इस डिजिटल युग में, बटन अपने डिजिटल रूप में भी विकसित हुआ है, जो भौतिक बटन की तुलना में इसे अधिक संवादात्मक, गतिशील और वास्तविक बनाने में आसान बनाता है.
इसलिए, इस बार, हम एक स्लीक और इंटरेक्टिव बटन बनाने जा रहे हैं जो ड्रिब्लबल पर इस बेहतरीन डिज़ाइन पर आधारित है जिसमें केवल CSS का उपयोग किया गया है.
ठीक है, चलो बस शुरू हो जाओ.
एचटीएमएल
हम अपने HTML डॉक्यूमेंट पर निम्नलिखित मार्कअप लगाकर बटन को बंद कर देंगे। यह वास्तव में सरल है, बटन एक एंकर टैग पर आधारित होगा, हमारे पास ए भी है अवधि इसके बाद सूचक प्रकाश बनाने के लिए, और फिर वे एक साथ HTML5 में लिपटे हुए हैं अनुभाग टैग.
& # XF011;
यहां बताया गया है कि हमारा बटन शुरू में कैसा दिखता है.
बेसिक स्टाइलिंग
इस खंड में, हम पर काम करना शुरू कर देंगे शैलियाँ.
हम पहले शरीर के दस्तावेज पर सूक्ष्म पैटर्न से इस अंधेरे पृष्ठभूमि को लागू करते हैं, और केंद्र में अनुभाग. फिर, हम डॉटेड को भी हटा देंगे रूपरेखा के उपर : फोकस तथा : सक्रिय संपर्क.
शरीर पृष्ठभूमि: url ('चित्र / micro_carbon.png'); अनुभाग मार्जिन: १५० पीएक्स ऑटो ०; चौड़ाई: 75 पीएक्स; ऊंचाई: 95 पीएक्स; स्थिति: रिश्तेदार; पाठ-संरेखण: केंद्र; : सक्रिय,: फोकस रूपरेखा: 0; कस्टम फ़ॉन्ट का उपयोग करना
बटन के आइकन के लिए, हम एक छवि के बजाय फ़ॉन्ट विस्मयकारी से एक कस्टम फ़ॉन्ट का उपयोग करेंगे। इस तरह से आइकन स्टाइलशीट के माध्यम से आसानी से स्टाइल-सक्षम और स्केल-सक्षम हो जाएगा.
फ़ॉन्ट डाउनलोड करें, फ़ॉन्ट फ़ाइलों को संग्रहीत करें (eot, woff, ttf और svg) फोंट्स फ़ोल्डर, और फिर एक नए फ़ॉन्ट परिवार को परिभाषित करने के लिए अपनी स्टाइलशीट पर निम्न कोड रखें.
@ फ़ॉन्ट-चेहरा फ़ॉन्ट-परिवार: "FontAwesome"; src: url ("फोंट / फॉन्टवॉव- webfont.eot"); src: url ("फॉन्ट / फॉन्टव्यूब-वेबफॉन्ट। ईओटी? # एफ़िक्स") फॉर्मेट ('ईओटी'), यूआरएल ("फॉन्ट्स / फॉन्टवॉवेल-वेबफॉन्ट.वॉफ़") फॉर्मेट ('वॉफ़ऑफ़'), यूआरएल (फोंट / फॉन्टवॉश-) webfont.ttf ") प्रारूप ('truetype'), url (" फ़ॉन्ट / fontawesome-webfont.svg # FontAwesome ") प्रारूप ('svg'); फ़ॉन्ट-वजन: सामान्य; फ़ॉन्ट-शैली: सामान्य; 
पावर आइकन हमें इस बटन की आवश्यकता है, जिसे यूनिकोड संख्या में दर्शाया गया है F011; यदि आप ऊपर दिए गए HTML मार्कअप को करीब से देखते हैं, तो हमने इस संख्यात्मक चरित्र को रखा है & # XF011; लंगर टैग के भीतर, लेकिन चूंकि हमने रिवाज को परिभाषित नहीं किया है फ़ॉन्ट परिवार बटन शैली में, आइकन को सही तरीके से प्रस्तुत करना बाकी है.
आगे की पढाई: यूनिकोड और HTML: दस्तावेज़ वर्ण
बटन को स्टाइल करना
सबसे पहले, हमें कस्टम को परिभाषित करने की आवश्यकता है फ़ॉन्ट परिवार बटन के लिए.
हमारा बटन एक सर्कल होगा, हम सर्कल इफेक्ट का उपयोग करके प्राप्त कर सकते हैं बॉर्डर-त्रिज्या संपत्ति और मूल्य सेट करें, कम से कम, बटन का आधा चौड़ाई.
चूंकि, हम आइकन के लिए एक फ़ॉन्ट का उपयोग कर रहे हैं, हम आसानी से सेट कर सकते हैं रंग और जोड़ पाठ की छाया स्टाइलशीट में आइकन के लिए भी.
अगला, हम बटन के लिए एक बेवल प्रभाव भी बनाएंगे। यह प्रभाव काफी पेचीदा है। सबसे पहले, हमें आवेदन करने की आवश्यकता है पृष्ठभूमि-रंग: आरजीबी (83,87,93); बटन के रंग आधार के लिए, फिर हम चार परतों तक जोड़ते हैं बॉक्स-छाया.
एक फ़ॉन्ट-परिवार: "FontAwesome"; रंग: आरजीबी (37,37,37); पाठ-छाया: 0px 1px 1px rgba (250,250,250,0.1); फ़ॉन्ट-आकार: 32pt; प्रदर्शन क्षेत्र; स्थिति: रिश्तेदार; पाठ-सजावट: कोई नहीं; पृष्ठभूमि-रंग: आरजीबी (83,87,93); बॉक्स-छाया: 0px 3px 0px 0px rgb (34,34,34), / * 1 छाया * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd छाया * / इनसेट 0px 1px 1px 0px rgba (250) , 250, 250, .2), / * 3 छाया * / इनसेट 0px -12px 35px 0px rpx (0, 0, 0, .5); / * 4 वीं छाया * / चौड़ाई: 70px; ऊंचाई: 70 पीएक्स; सीमा: 0; सीमा-त्रिज्या: 35 पीएक्स; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 79px;
बटन के बाहर एक बड़ा वृत्त भी है और हम इसका उपयोग करेंगे : से पहले छद्म तत्व अतिरिक्त मार्कअप जोड़ने के बजाय इसके लिए.
a: content: "" से पहले; चौड़ाई: 80 पीएक्स; ऊंचाई: 80 पीएक्स; प्रदर्शन क्षेत्र; z- इंडेक्स: -2; स्थिति: निरपेक्ष; पृष्ठभूमि-रंग: आरजीबी (26,27,29); बाएं: -5 पीएक्स; शीर्ष: -2 पीएक्स; सीमा-त्रिज्या: 40 पीएक्स; बॉक्स-छाया: 0px 1px 0px 0px rgba (250,250,250,0.1), इनसेट 0px 1px 2px 2px rgba (0, 0, 0, 0.5);
आगे की पढाई: सीएसएस: पहले और: बाद में छद्म तत्वों (Hongkiat.com)
संकेतक रौशनी
बटन के नीचे, पॉवर ऑन और ऑफ स्थिति को नामित करने के लिए एक छोटा प्रकाश है। नीचे, हम प्रकाश के रंग के लिए लाल लागू करते हैं क्योंकि बिजली शुरू में बंद है, हम भी जोड़ते हैं डब्बे की छाया प्रकाश के चमक प्रभाव का अनुकरण करने के लिए.
ए + स्पैन डिस्प्ले: ब्लॉक; चौड़ाई: 8 पीएक्स; ऊंचाई: 8 पीएक्स; पृष्ठभूमि-रंग: आरजीबी (226,0,0); बॉक्स-छाया: इनसेट 0px 1px 0px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px 2px rgba (226,0,0,0.5); सीमा-त्रिज्या: 4 पीएक्स; दोनों को साफ करो; स्थिति: निरपेक्ष; नीचे: 0; बाएं: 42%;
प्रभाव
इस बिंदु पर हमारा बटन अच्छा लगने लगता है और हमें केवल उस पर कुछ प्रभाव जोड़ने की आवश्यकता होती है, उदाहरण के लिए, जब बटन पर 'क्लिक' किया जा रहा हो, तो हम चाहते हैं कि बटन ऐसा लगे कि वह दबाया जा रहा है और नीचे दबा हुआ है।.
प्रभाव प्राप्त करने के लिए, पहला डब्बे की छाया बटन में शून्य हो जाएगा और स्थिति थोड़ी कम हो जाएगी। हमें बटन की स्थिति से मेल खाने के लिए अन्य तीन छायाओं की तीव्रता को थोड़ा समायोजित करने की भी आवश्यकता है.
a: सक्रिय बॉक्स-छाया: ० पी ० पी ० पी ० पी ० पी ० पी ० पी ० एस ० जी ० (३४,३४,३४), / * १ छाया * / ० पी ० पी ० पी ० पी ० पी ० पी-पी-पीएस ० पी ० पी ० (१17,१17,१,), / Shadow * दूसरी छाया * / इनसेट ० पी ० पी ० पी ० पी ० पी ० पी ० पी ० पी ० एस ० ए ० 0px rgba (250, 250, 250, .2), / * 3 की छाया * / इनसेट 0px -10px 35px 5px rgba (0, 0, 0, .5); / * चौथी छाया * / पृष्ठभूमि-रंग: आरजीबी (83,87,93); शीर्ष: 3 पीएक्स;
इसके अलावा, एक बार बटन पर क्लिक करने के बाद, इसे नीचे दबाया जाना चाहिए और यह इंगित करने के लिए आइकन चमकना चाहिए कि बिजली चालू है.
इस तरह के प्रभाव को प्राप्त करने के लिए हम बटन का उपयोग करके लक्ष्य करेंगे : लक्ष्य छद्म वर्ग, फिर आइकन के रंग को सफेद में बदलें और a जोड़ें पाठ की छाया सफेद रंग के साथ भी.
a: target बॉक्स-छाया: 0px 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 7px 0px rgb (17,17,17), इनसेट 0px 1px 1px 0px 0px rgba (250, 250, 250, .2)। , इनसेट 0px -10px 35px 5px rgba (0, 0, 0, .5); पृष्ठभूमि-रंग: आरजीबी (83,87,93); शीर्ष: 3 पीएक्स; रंग: #fff; पाठ-छाया: 0px 0px 3px rgb (250,250,250);
आगे की पढाई: उपयोग करना: लक्ष्य छद्म वर्ग
हमें समायोजित करने की भी आवश्यकता है डब्बे की छाया बटन के बाहर सर्कल में, निम्नानुसार है.
a: सक्रिय: इससे पहले, a: लक्ष्य: top: -5px से पहले; पृष्ठभूमि-रंग: आरजीबी (26,27,29); बॉक्स-छाया: 0px 1px 0px 0px rgba (250,250,250,0.1), इनसेट 0px 1px 2px 2px rgba (0, 0, 0, 0.5);
प्रकाश संकेतक डिफ़ॉल्ट लाल से हरे रंग में बदल जाएगा ताकि यह सुनिश्चित किया जा सके कि बिजली पहले से ही चालू है.
a: target + span बॉक्स-छाया: इनसेट 0px 1px 0px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px 2px rgba (135,187,83,0.5); पृष्ठभूमि-रंग: आरजीबी (135,187,83);
संक्रमण प्रभाव
अंत में, बटन के प्रभाव को सुचारू रूप से चलाने के लिए, हम निम्नलिखित संक्रमण प्रभाव भी लागू करेंगे.
नीचे यह स्निपेट विशेष रूप से संक्रमण को जोड़ देगा रंग संपत्ति और पाठ की छाया के लिये 350ms लंगर तत्व में.
संक्रमण: रंग 350ms, पाठ-छाया 350ms; -ओ-संक्रमण: रंग 350ms, पाठ-छाया 350ms; -मोज़-संक्रमण: रंग 350ms, पाठ-छाया 350ms; -वेबकैट-संक्रमण: रंग 350ms, पाठ-छाया 350ms;
नीचे यह दूसरा स्निपेट संक्रमण को जोड़ देगा पीछे का रंग तथा डब्बे की छाया प्रकाश संकेतक में संपत्ति.
a: लक्ष्य + स्पैन संक्रमण: पृष्ठभूमि-रंग 350ms, बॉक्स-छाया 700ms; -ओ-संक्रमण: पृष्ठभूमि-रंग 350ms, बॉक्स-छाया 700ms; -मोज़-संक्रमण: पृष्ठभूमि-रंग 350ms, बॉक्स-छाया 700ms; -वेबकैट-संक्रमण: पृष्ठभूमि-रंग 350ms, बॉक्स-छाया 700ms;
अंतिम परिणाम
हम उन सभी शैलियों के माध्यम से आए हैं जिनकी हमें ज़रूरत है, अब आप अंतिम परिणाम को लाइव देख सकते हैं और साथ ही नीचे दिए गए लिंक से स्रोत फ़ाइल डाउनलोड कर सकते हैं.
- डेमो
- स्रोत डाउनलोड करें
बोनस: इसे कैसे बंद करें
यहाँ बोनस आता है। यदि आपने उपरोक्त डेमो से बटन की कोशिश की है, तो आपने देखा है कि बटन को केवल एक बार क्लिक किया जा सकता है, इसे चालू करने के लिए, इसलिए हम इसे बंद कैसे करते हैं?.
दुर्भाग्य से, हमें इसे jQuery के साथ करना है, लेकिन यह वास्तव में सरल भी है। नीचे सभी jQuery कोड की आवश्यकता है.
$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () $ ('# बटन')। क्लिक करें (फ़ंक्शन () $ (यह) .toggleClass ('पर'););); ऊपर स्निपेट लंगर में कक्षा को जोड़ देगा, और हमने इसका उपयोग किया toggleClass इसे जोड़ने के लिए jQuery से कार्य। तो, जब #button पर क्लिक किया जाता है, jQuery यह जाँच करेगा कि क्या क्लास को जोड़ा गया है या नहीं: जब यह नहीं है, तो jQuery क्लास को जोड़ देगा, और अगर इसे जोड़ा गया है, तो jQuery क्लास को हटा देगा.
ध्यान दें: JQuery लाइब्रेरी को शामिल करना न भूलें.
अब हमें स्टाइल को थोड़ा बदलना होगा। बस सभी की जगह : लक्ष्य छद्म तत्व उसके साथ .पर वर्ग चयनकर्ता, इस प्रकार है:
a.on बॉक्स-छाया: 0px 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rpx (17,17,17), इनसेट 0px 1px 1px 0px 0px rgba (250, 250, 250, .2)। , इनसेट 0px -10px 35px 5px rgba (0, 0, 0, .5); पृष्ठभूमि-रंग: आरजीबी (83,87,93); शीर्ष: 3 पीएक्स; रंग: #fff; पाठ-छाया: 0px 0px 3px rgb (250,250,250); a: सक्रिय: इससे पहले, a.on: इससे पहले शीर्ष: -5px; पृष्ठभूमि-रंग: आरजीबी (26,27,29); बॉक्स-छाया: 0px 1px 0px 0px rgba (250,250,250,0.1), इनसेट 0px 1px 2px 2px rgba (0, 0, 0, 0.5); a.on + span बॉक्स-छाया: इनसेट 0px 1px 0px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px 2px rgba (135,187,83,0.5); पृष्ठभूमि-रंग: आरजीबी (135,187,83);
अंत में, इसे ब्राउज़र में आज़माएँ.
- डेमो
- स्रोत डाउनलोड करें
