वेबसाइट डिजाइन करते समय आपके पास अक्सर एक बटन होता है जिसे आप चाहते हैं कि यह एक निश्चित तरीके से दिखाई दे। उदाहरण के लिए, हो सकता है कि आप चाहते हैं कि बटन पर उपयोगकर्ता का ध्यान आकर्षित करने के लिए पृष्ठ पर अन्य तत्वों की तुलना में पृष्ठभूमि का रंग हो।
सीएसएस का उपयोग करके, डेवलपर्स शैलियों के साथ बटन बना सकते हैं। CSS आपको अन्य चीजों के साथ बदलने की अनुमति देता है।
रंग, टेक्स्ट का आकार, बॉर्डर, चौड़ाई और बटन की ऊंचाई, यह ट्यूटोरियल उदाहरणों के साथ चर्चा करेगा कि HTML को स्टाइल करने के लिए CSS गुणों की एक श्रृंखला का उपयोग कैसे करें बटन। जब तक आप इस ट्यूटोरियल को पढ़ना समाप्त कर लेंगे, तब तक आप CSS का उपयोग करने वाले बटन को स्टाइल करने के विशेषज्ञ होंगे।
बटन का अवलोकन
आप कई HTML तरीकों से एक बटन को परिभाषित कर सकते हैं। दो सबसे आम तरीके हैं अपना बूटकैंप मैच खोजें
यदि हम अपने बटन को स्टाइल करना चाहते हैं, दूसरे शब्दों में, पृष्ठ के रूप को अनुकूलित करने के लिए, हमें css का उपयोग करना होगा। इस लेख में, हम चर्चा करेंगे कि एक बटन पर निम्नलिखित कैसे करें: ..
पृष्ठभूमि का रंग बदलें
पाठ का रंग बदलें
पाठ का आकार बदलें।
पैडिंग जोड़ें।
कोनों के चारों ओर।
रंगीन बॉर्डर जोड़ें।
इसका उपयोग करें: .... होवर सुविधा
छाया जोड़ें
चौड़ाई बदलें
बंद करें
इसे चेतन करें।
हम यह भी चर्चा करेंगे कि क्षैतिज और लंबवत बटनों के समूह कैसे बनाएं।
बैक - प्लेन कलर
बटन के डिज़ाइन के दौरान, पहली चीज़ जो आप करना चाहते हैं, वह है एक बैकग्राउंड कलर - बटन के लिए प्लान सेट करना। डिफ़ॉल्ट रूप से, एक बटन में एक सफेद बैकग्राउंड होता है और काला पाठ। CSS पृष्ठभूमि रंग का उपयोग करके, हम c a बटन की पृष्ठभूमि का रंग बदलें।
मान लीजिए कि आप किसी वेबसाइट के लिए एक बटन डिज़ाइन कर रहे हैं और आप चाहते हैं कि बटन की पृष्ठभूमि गुलाबी हो। हम निम्नलिखित CSS कोड का उपयोग करके अपने बटन का रंग बदल सकते हैं:
हमारा कोड रिटर्न:
पृष्ठभूमि रंग गुण का उपयोग करके, हमने पृष्ठभूमि का रंग बदल दिया है हमारे बटन का गुलाबी रंग। हम इस गुण का उपयोग करके अपने बटन की पृष्ठभूमि के रंग को एक रंग में बदल सकते हैं।
पाठ का रंग
बटन के पाठ का रंग बदलने के लिए आप इसका उपयोग कर सकते हैं color संपत्ति। एक बटन और चाहते हैं कि बटन की पृष्ठभूमि गुलाबी हो और पाठ हरे रंग में हो। हम निम्नलिखित कोड का उपयोग करके इस बटन को बना सकते हैं:
हमारा कोड रिटर्न:
हमारा बटन पहले जैसा ही आकार का है, लेकिन अब अंदर के अक्षरों का आकार 20px है। हमने अपने बटन में टेक्स्ट के आकार को सेट करने के लिए फ़ॉन्ट आकार विशेषता का उपयोग किया है।
पैडिंग
बटन डिजाइन करते समय, आप यह तय कर सकते हैं कि आप एक बटन के अंदर टेक्स्ट और बटन की बाहरी दीवारों के बीच एक निश्चित मात्रा में जगह चाहते हैं। यह वह जगह है जहां कुशनिंग प्रॉपर्टी काम में आती है।
पैडिंग प्रॉपर्टी लंबाई संकेतक (पीएक्स, ईएम, और so on ) या प्रतिशत मान टेक्स्ट बटन और उसकी सीमाओं के बीच एक निश्चित मात्रा में स्थान को परिभाषित करने के लिए।
मान लीजिए कि हम अपने पेज पर दो बटन बनाना चाहते हैं। एक बटन में 40px पैडिंग और दूसरा होना चाहिए 20px पैडिंग होनी चाहिए। हम निम्नलिखित कोड का उपयोग करके ये बटन बना सकते हैं:
हमारा कोड रिटर्न:
<आंकड़ा वर्ग = "wp-ब्लॉक छवि">
आप बॉर्डर-त्रिज्या गुण का उपयोग गोल कोनों के साथ आयताकार बटन बनाने के लिए कर सकते हैं। यहां तीन कोड उदाहरण दिए गए हैं जो सीमा-त्रिज्या संपत्ति का उपयोग करते हैं। विभिन्न त्रिज्या आकारों के प्रभाव को स्पष्ट करने के लिए, प्रत्येक उदाहरण एक भिन्न आकार की सीमा त्रिज्या का उपयोग करता है।
हमारा कोड रिटर्न:
इस उदाहरण में हमने तीन बटन बनाए हैं। बटन के बॉर्डर का दायरा जितना बड़ा होगा, बटन के कोने उतने ही गोल होंगे।
बॉर्डर का रंग
आप CSS बॉर्डर प्रॉपर्टी वाले बटन में कस्टम रंगीन बॉर्डर जोड़ सकते हैं .
मान लीजिए कि आप एक रंगीन बॉर्डर वाला बटन बनाना चाहते हैं ताकि उपयोगकर्ता के लिए बटन की सीमाएं स्पष्ट हों। आप निम्न कोड का उपयोग करके एक बटन बना सकते हैं:
हमारे बटन की पृष्ठभूमि सफेद है, इसकी सामग्री काली है, और सभी किनारों पर 25px पैडिंग है। हमने अपने चारों ओर 3 पिक्सेल चौड़ी ठोस सीमा बनाने के लिए सीमा संपत्ति का उपयोग किया है बटन पर क्लिक करें और हमारे बॉर्डर का रंग # ffb6c1 पर सेट करें, जो हल्के गुलाबी रंग के लिए हेक्स मान है।
यदि आप चाहते हैं कि आप बॉर्डर प्रॉपर्टी के बारे में अधिक जानना चाहते हैं, तो CSS बॉर्डर प्रॉपर्टी पर हमारा लेख पढ़ें
होवर करें
आप चयनकर्ता सीएसएस का उपयोग कर सकते हैं। जब कोई उपयोगकर्ता बटन पर होवर करता है तो बटन की शैली बदलने के लिए वेब पेज को निर्देशित करने के लिए होवर करें कर्सर।
मान लीजिए कि आप काले टेक्स्ट और सफेद बैकग्राउंड वाला एक बटन बनाते हैं और आप चाहते हैं कि टेक्स्ट का रंग सफेद में बदल जाए और जब उपयोगकर्ता उस पर माउस घुमाता है तो उसकी पृष्ठभूमि का रंग हरा हो जाता है। वह। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
यहां हमारे कोड का परिणाम है:
उपरोक्त आरेख में पहला बटन दिखाता है कि हमारा बटन कैसा दिखता है जैसे जब उपयोगकर्ता बटन पर होवर करता है। जैसा कि आप देख सकते हैं, कोड काले टेक्स्ट, गुलाबी बॉर्डर और 25 पिक्सेल पैडिंग के साथ एक सफेद बटन देता है। यह बटन की डिफ़ॉल्ट स्थिति है। लेकिन जब माउस माउस पर होवर करता है बटन, बटन की पृष्ठभूमि का रंग हरा हो जाता है और बटन का टेक्स्ट रंग सफेद हो जाता है।
जैसे ही उपयोगकर्ता का कर्सर बटन से दूर जाता है, बटन अपनी डिफ़ॉल्ट स्थिति में वापस आ जाता है।
, आप यह इंगित करने के लिए ट्रांज़िशन अवधि विशेषता का भी उपयोग कर सकते हैं कि उपयोगकर्ता द्वारा कर्सर के ऊपर मंडराने के बाद बटन कितनी देर तक बदलना चाहिए। इसलिए यदि हम उपरोक्त बटन बदलने से पहले 1 सेकंड लेना चाहते हैं (एक हरे रंग की पृष्ठभूमि में और सफेद पाठ) हम इस कोड का उपयोग कर सकते हैं:
यह आप उपयोग कर सकते हैं CSS बॉक्स-शैडो प्रॉपर्टी बटन शैडो बनाने के लिए। बॉक्स-छाया गुण कई मापदंडों को स्वीकार करता है। आप हमारे box-shadow CSS ट्यूटोरियल में इन मापदंडों के बारे में अधिक जान सकते हैं।
मान लें कि हम एक बटन डिज़ाइन करते हैं और हम चाहते हैं कि यह एक बूंद छाया है। हम बटन के लिए निम्नलिखित कोड का उपयोग करके यह छाया बना सकते हैं:
हमारा कोड रिटर्न:
इस उदाहरण में हमने अपने बटन में एक छाया जोड़ा है। हमने अपनी छाया के लिए जो पैरामीटर निर्दिष्ट किए हैं वे इस प्रकार हैं:
x ऑफ़सेट 0 है, जिसका अर्थ है कि हमारी छाया सीधे हमारे
y बटन के नीचे दिखाई देती है।-ऑफ़सेट 10px है, जिसका अर्थ है कि हमारी छाया हमारे बटन के नीचे 10px तक फैली हुई है।
धुंधला त्रिज्या 10px है, जिसका अर्थ है कि हमारी छाया का प्रभाव है
