एक बटन HTML का एक मूलभूत हिस्सा है जो विभिन्न कार्य करता है। CSS का उपयोग करके, आप बटन को डिज़ाइन और स्टाइल कर सकते हैं। बटन को डिज़ाइन करने के विभिन्न तरीके हैं, जैसे कि बटन को रंगना, आकार बदलना, होवर करना, और भी बहुत कुछ।

इस लेख में, पहले हम सीखेंगे कि बटन कैसे बनाया जाता है, फिर होवर पर बटन का रंग कैसे बदलें।

आएँ शुरू करें!

CSS में होवर पर बटन का रंग कैसे बदलें?

सीएसएस में, ' :होवर 'होवर पर बटन का रंग बदलने के लिए प्रयोग किया जाता है। ' :होवर 'एक छद्म वर्ग है जो HTML तत्वों के व्यवहार को बदलने की अनुमति देता है जब एक माउस उस पर होता है, जैसे कि लिंक, बटन, चित्र और कई अन्य तत्व।

वाक्य रचना :होवर नीचे दिया गया है।

वाक्य - विन्यास

ऊपर दिए गए सिंटैक्स में, ' एक 'HTML तत्व को संदर्भित करता है जहाँ' :होवर ' लागू की गई है। CSS में, आप HTML तत्वों के होवर व्यवहार को सेट कर सकते हैं, जैसे कि तत्व का रंग, आकार और चौड़ाई।

चरण 1: डिव और बटन बनाएं

HTML में, सबसे पहले, हम एक div बनाएंगे और

के साथ एक हेडिंग और एक टैग का उपयोग करके एक बटन जोड़ेंगे। यहां, हम बटन के वर्ग नाम को “के रूप में निर्दिष्ट करेंगे” बीटीएन 'और बटन टेक्स्ट' के रूप में मुझ पर होवर करें '

एचटीएमएल

उपर्युक्त कोड का परिणाम नीचे दिया गया है। आप देख सकते हैं कि शीर्षक और बटन बनाए गए हैं:

अब, एक-एक करके डिव और बटन को स्टाइल करने के लिए CSS पर जाएँ।

चरण 2: स्टाइल बटन और डिव

सबसे पहले, हम 'का उपयोग करके बनाए गए कंटेनर को स्टाइल करेंगे' डिव ' फिर, हम डिव की ऊंचाई को 'के रूप में सेट करेंगे' 250px 'और पृष्ठभूमि रंग' के रूप में आरजीबी(199, 173, 192) ' हम div की सीमा को समायोजित करने के लिए सीमा संपत्ति का भी उपयोग करेंगे, चौड़ाई 'के रूप में' 5पीएक्स ',' के रूप में शैली ठोस ', और रंग' के रूप में आरजीबी (40, 2, 55) '

सीएसएस

नीचे दिया गया आउटपुट इंगित करता है कि जोड़ा गया स्टाइल सफलतापूर्वक div पर लागू किया गया है:

अगले चरण में, हम CSS का उपयोग करके बटन को स्टाइल करेंगे।

अब, हम बटन को स्टाइल करेंगे “ .बीटीएन HTML में बनाए गए बटन को एक्सेस करने के लिए। उसके बाद, हम 'सेटिंग' करके बटन के बॉर्डर को छिपा देंगे। कोई भी नहीं 'सीमा संपत्ति मूल्य के रूप में। उसके बाद, हम फ़ॉन्ट आकार को “ विशाल 'और बटन की पैडिंग' 10px 'बटन की सामग्री और बटन की सीमा के बीच रिक्त स्थान बनाने के लिए। अंत में, हम टेक्स्ट और बैकग्राउंड का रंग “के रूप में सेट करेंगे” आरजीबी (50, 0, 54) ' तथा ' आरजीबी(193, 54, 135) ':

बटन अब स्टाइल किया गया है:

इसके अलावा, हम आवेदन करेंगे ' :होवर 'होवर पर एक बटन का रंग बदलने के लिए।

चरण 3: होवर पर बटन का रंग बदलें

अब, हम उपयोग करेंगे ' .बीटीएन: होवर ' बटन को होवर छद्म-वर्ग तत्व से जोड़ने के लिए। परिणामस्वरूप, बटन पर होवर लागू किया जाएगा। इसके बाद, हम बटन के बैकग्राउंड कलर और टेक्स्ट कलर को “के रूप में सेट करेंगे” आरजीबी (66, 2, 41) ' तथा ' आरजीबी(119, 255, 0) ' ये रंग बटन पर तब लागू होंगे जब माउस उस पर होगा:

नीचे दिए गए आउटपुट में, आप देख सकते हैं कि जब माउस उस पर होवर करता है तो बटन का रंग बदल जाता है:

इतना ही! हमने CSS का उपयोग करके होवर पर बटन का रंग बदलने की विधि के बारे में बताया है।

निष्कर्ष

होवर पर एक बटन का रंग बदलने के लिए, ' :होवर छद्म वर्ग तत्व का उपयोग किया जाता है। ऐसा करने के लिए, बटन को :hover से लिंक करें और बटन का रंग सेट करें, जो तब बदल जाएगा जब हम उस पर होवर करेंगे। इस लेख में, हमने होवर पर बटन का रंग बदलने की विधि के बारे में बताया है और इसका एक उदाहरण प्रदान किया है।